超級簡單的SASS教程和使用指南
英文 | https://mobileappcircular.com/super-easy-sass-tutorial-and-usage-guide-6fb75946ff6c
翻譯 | 楊小愛
$ curl -L https://get.rvm.io | bash -s stable$ source ~/.rvm/scripts/rvm$ rvm -v$ rvm install 2.0.0$ gem -v
可以看到版本號，證明安裝成功！
如果您已經(jīng)安裝了 Ruby，則在命令行中輸入以下命令：
gem install sass然后，就可以使用了。
2.2、 使用
SASS 文件是可以直接使用 CSS 語法的普通文本文件。
文件擴(kuò)展名為.scss，意思是Sassy CSS。
下面的命令可以在屏幕上顯示 .scss 文件的轉(zhuǎn)換后的 css 代碼。（假設(shè)文件名為 test。）
sass test.scss如果要將顯示的結(jié)果保存為文件，請?jiān)谄浜筇砑?.css 文件名。
sass test.scss test.cssSASS 提供了四種編譯風(fēng)格選項(xiàng)：
nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
擴(kuò)展：未縮進(jìn)、擴(kuò)展的 css 代碼。
緊湊：簡潔格式的 css 代碼。
Compressed：壓縮后的css 代碼。
在生產(chǎn)環(huán)境中，通常使用最后一個(gè)選項(xiàng)。
sass — style compressed test.sass test.css你也可以讓SASS監(jiān)控某個(gè)文件或目錄，一旦源文件發(fā)生變化，它會自動生成一個(gè)編譯版本。
// 觀察一個(gè)文件sass — watch input.scss:output.css// 觀察一個(gè)目錄sass — watch app/sass:public/stylesheets
SASS 的網(wǎng)站提供了一個(gè)在線轉(zhuǎn)換器。您可以在那里嘗試下面的各種示例。
3、基本用法
3.1、 變量
SASS 允許使用變量，所有變量都以 $ 開頭。
$blue: #1875e7;div {color: $blue;}
如果變量需要嵌入到字符串中，必須寫在#{}中。
side: left;.Rounded {{$side}-radius: 5px;}
3.2、 計(jì)算功能
SASS 允許在代碼中使用計(jì)算：
body {Margin: (14px/2);Top: 50px + 100px;Right: $var * 10%;}
3.3、 嵌套
SASS 允許嵌套選擇器。例如，以下 CSS 代碼：
Div h1 {Color: red;}can be written as:Div {Hi {Color:red;}}can also be nested, such as the border-color attribute, which can be written as:P {Border: {color: red;}}that a colon must be added after the border.
在嵌套的代碼塊中，您可以使用 $ 來引用父元素。例如，a:hover 偽類可以寫成：
a {&:Hover {color: #ffb3ff;}}
3.4、 注意事項(xiàng)
SASS 中有兩種注釋樣式。
標(biāo)準(zhǔn)的 CSS 注釋 / 注釋 / 將保留在編譯文件中。
單行注釋 // 注釋，只保存在SASS源文件中，編譯后省略。
在 /* 后添加感嘆號表示這是“重要說明”。即使以壓縮方式編譯，也會保留這行注釋，通常可以用來聲明版權(quán)信息。
/*!Important note!*/
4、 代碼重用
4.1、 繼承
SASS 允許選擇器從另一個(gè)選擇器繼承。例如，現(xiàn)有的 class1：
.class1 {Border: 1px solid #ddd;}
要從 class2 繼承 class1，請使用 @extend 命令：
.class2 {@Extend .class1;Font-size:120%;}
4.2 、Mixin
Mixin 有點(diǎn)像 C 語言中的宏，一個(gè)可以復(fù)用的代碼塊。
使用@mixin 命令定義代碼塊。
@mixin left {float: left;margin-left: 10px;}
使用@include 命令來調(diào)用這個(gè)mixin。
div {@Include left;}
mixin 的強(qiáng)大之處在于您可以指定參數(shù)和默認(rèn)值。
@mixin left($value: 10px) {float: left;margin-right: $value;}
使用時(shí)，根據(jù)需要添加參數(shù)：
div {@Include left(20px);}
下面是一個(gè)mixin的例子，用于生成瀏覽器前綴。
@mixin rounded($vert, $horz, $radius: 10px) {Border-#{$vert}-#{$horz}-radius: $radius;-Moz-border-radius-#{$vert}#{$horz}: $radius;-Webkit-border-#{$vert}-#{$horz}-radius: $radius;}
使用時(shí)可以這樣調(diào)用：
#navbar li {@include rounded(top, left);}#footer {@include rounded(top, left, 5px);}
4.3 、顏色功能
SASS 提供了一些內(nèi)置的顏色函數(shù)來生成一系列顏色。
cc3, 10%) // #d6d65ccc3, 10%) // #a3a329cc3) // #808080cc3) // #33c
4.4 、插入文件
@import 命令用于插入外部文件。
@import “path/filename.scss”;如果插入 .css 文件，則相當(dāng)于 css import 命令。
@import “foo.css”;5、高級用法
5.1、條件語句
@if 可以用來判斷：
p {@If 1 + 1 == 2 {border: 1px solid;}@If 5 ? {border: 2px dotted;}}There is also the @else command:@if lightness($color)> 30% {Background-color: #000;} @else {Background-color: #fff;}
5.2、 循環(huán)語句
SASS 支持 for 循環(huán)：
@for $i from 1 to 10 {.Border-#{$i} {Border: #{$i}px solid blue;}}
還支持while循環(huán)：
$i: 6;@While $i> 0 {.Item-#{$i} {width: 2em * $i;}$i: $i-2;}
each 命令類似于 for：
@each $member in a, b, c, d {.#{$member} {Background-image: url(“/image/#{$member}.jpg”);}}
5.3、 自定義功能
SASS 允許用戶編寫自己的函數(shù)。
@function double($n) {@Return $n * 2;}#Sidebar {Width: double(5px);}
看了我上面的文章，您感覺如何？學(xué)會怎么使用SASS了嗎？如果還有什么問題，可以在留言區(qū)給我留言，我們一起交流學(xué)習(xí)。
另外，如果你是第一次使用的話，你可以文章內(nèi)容描述安裝sass，然后用記事本輸入上面的case，邊看邊運(yùn)行一遍。
經(jīng)過一段時(shí)間的學(xué)習(xí)后，我相信你肯定可以上手SASS了。
最后，感謝您的閱讀，如果您覺得今天內(nèi)容有用，請記得點(diǎn)贊我，關(guān)注我，并且也可以將它分享給您身邊做開發(fā)的朋友，也許能夠幫助到他。
祝編程愉快！
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
