scss使用后的简单入门总结

端午节第一天

将之前做的一个小demo的css样式改为了scss

好吧 改完了 赶紧由小兵 升级到中尉了

什么是scss?

我的理解是scss 就是css 的预处理器，使css变得更加富有逻辑。

有什么好处？

比如再项目过程中 字体都是red 现在 我想把所有字体 无论大小都换成 green

1. 你要改每个样式里面的字体颜色(臣妾做不到)

2. 当然你也可以用模块化的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之旅吧！！！！