端午节第一天

将之前做的一个小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使用后的简单入门总结