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

（记得FQ）

可以查看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之旅吧！！！！