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之旅吧！！！！