scss使用后的简单入门总结
端午节第一天
将之前做的一个小demo的css样式改为了scss
好吧 改完了 赶紧由小兵 升级到中尉了
什么是scss?
我的理解是scss 就是css 的预处理器,使css变得更加富有逻辑。
有什么好处?
比如再项目过程中 字体都是red 现在 我想把所有字体 无论大小都换成 green
你要改每个样式里面的字体颜色(臣妾做不到)
当然你也可以用模块化的css 将它分出一个class.然后满屏都是font-normal-color font-big-color font-size-14 font-size-13 这样的东西
好吧 有了scss 你可以更好的解决刚刚我所遇到的这种问题
你只需要改变量
<p class="nav">Hello SCSS!</p>
<div class="footer">Hello World!</div>
.nav{
color: $font-normal-color;
}
.footer {
color: $font-normal-color;
border: 1px solid $font-normal-color;
}
然后只需要改动
$font-normal-color: red;
如何安装?
如果是window系统
需要安装ruby 因为scss是基于ruby开发的
可以参考 http://www.w3cplus.com/sassguide/install.html
如果是Mac
不要要安装 自带
安装完ruby
输入
gem install sass
(记得翻墙)
可以查看scss的版本
sass -v
说明安装成功
开始如何使用
变量
$blue : #1875e7;
$side : left;
.rounded {
border-#{$side}:5px solid $blue;
}
计算
div {
padding: $var * 10%;
margin: (12px/2);
height: 20px + 30px;
}
嵌套
a{
&:hover {
color: red;
}
}
继承
.class1{
font-size: 14px;
color: red;
}
.class2 {
@extend .class1;
height:20px;
}
Mixin
@mixin size($value: 20px) {
height:$value;
width: $value;
}
.div1 {
background: red;
@include size(30px); //长宽都是30px
}
.div2 {
background: green;
@include size;//长宽都是0px
}
颜色函数
这里方法比较多,自己对颜色的换算也不是很懂 可以参考
http://www.w3cplus.com/preprocessor/sass-color-function.html
插入文件
@import '文件路径'
高级函数
if语句
div {
@if 1+1 ==2 {
border : 1px solid;
}
}
循环语句
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
@for $i from 1 to 5 {
.border-#{$i} {
border: #{$i}px solid solid blue;
}
}
自定义函数
.nav{
width: double(5px);
}
编译
sass test.scss test.css
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
开启你们SASS之旅吧!!!!
scss使用后的简单入门总结的更多相关文章
- 用IntelliJ IDEA创建Gradle项目简单入门
Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- Okio 1.9简单入门
Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...
- emacs最简单入门,只要10分钟
macs最简单入门,只要10分钟 windwiny @2013 无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...
- 【java开发系列】—— spring简单入门示例
1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...
- 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...
- Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门
说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...
- Asp.Net EF Code First 简单入门
今天在上班期间花了点时间学习了一下微软的EntityFramework Code First技术,这篇文章只是简单的入门,不多废话,下面直入主题. 一.首先添加一个解决方案,接着添加一个web网站,D ...
- HTML5简单入门系列(五)
前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
随机推荐
- Springboot-plus 安装使用的一些问题
最近在研究一些springboot的框架,然后看到了这个款 springboot plus ,下载下来研究下. 将安装部署的一些问题记录下来了. 第一个,就是部署的时候,我使用的MySQL数据库,导 ...
- YYH的积木(NOIP模拟赛Round 6)
题目描述 YYH手上有n盒积木,每个积木有个重量.现在他想从每盒积木中拿一块积木,放在一起,这一堆积木的重量为每块积木的重量和.现在他想知道重量最少的k种取法的重量分别是多少. 输入输出格式 输入格式 ...
- 设置JPA的Query返回Map对象
说明正常执行jpa查询的时候需要传一个对应实体进行映射返回的数据,这样有时候如果一个sql是复合sql关联很多表,就需要新建实体有点麻烦,通过下面方式就能将返回结果映射成map.这样就能随意获取返回结 ...
- undefined reference to XXX 问题原因
原文地址:http://blog.csdn.net/cserchen/article/details/5503556 Linux下编译程序时,经常会遇到“undefined reference to ...
- log4j配置文件动态指定日志文件名称
我们在项目当中经常会使用log4j进行日志记录,偶尔会遇到一些要求,比如日志文件名称按照启动参数动态配置,而不去修改log4j.xml,比较简单的一种做法是,通过设置系统属性的方式实现,代码: if( ...
- svn 基本使用
通过脚本删除物理文件已经不存在的文件 svn st | sed -n '/!/p' | awk '{print $2}' | xargs svn delete 或 svn st | awk '{if ...
- Java程序执行时间
第一种是以毫秒为单位计算的. Java代码 //伪代码 long startTime=System.currentTimeMillis(); //获取开始时间 doSomeThing(); ...
- 计蒜客 28319.Interesting Integers-类似斐波那契数列-递推思维题 (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 I)
I. Interesting Integers 传送门 应该是叫思维题吧,反正敲一下脑壳才知道自己哪里写错了.要敢于暴力. 这个题的题意就是给你一个数,让你逆推出递推的最开始的两个数(假设一开始的两个 ...
- Codeforces Round #321 (Div. 2) A. Kefa and First Steps【暴力/dp/最长不递减子序列】
A. Kefa and First Steps time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 模板—字符串—后缀自动机(后缀自动机+线段树合并求right集合)
模板—字符串—后缀自动机(后缀自动机+线段树合并求right集合) Code: #include <bits/stdc++.h> using namespace std; #define ...