一、什么是Sass/Scss.

　　Sass和Scss是指的是同一個東西。Sass的語法更近ruby，而Scss更接近css代碼。Sass/Scss是對css的擴展，但是scss/sass不能之間直接運行在瀏覽器中，需要編譯成css.

　　

　　二、在命令行中安裝Sass和使用

　　首先需要在電腦上安裝node.然后使用npm安裝Sass.　

　　npm install -g sass

　　常用的命令

　　sass main.scss main.csssass --watch main.scss:main.css

　　三、Sass的語法

　　a、nesting(嵌套)　

#main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;} }

　　編譯后：

#main p {color: #00ff00;width: 97%;
} #main p .redbox {background-color: #ff0000;color: #000000;
}

　　屬性嵌套：　　

?

.container {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex:{direction: column;wrap: nowrap;}align-items: center;padding: 3rem 0;box-sizing: border-box; }

　　編譯后：

.container {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;padding: 3rem 0;box-sizing: border-box; }

　　偽類選擇器的嵌套：　

.documentation-links .documentation-link {text-decoration: none;color: map-get($colors,main);display: block;padding: $size-tiny;border: $border-default;&:hover,&:active {color: white;background: map-get($colors,secondary);border-color: map-get($colors,secondary);} }

?

　　編譯后　

.documentation-links .documentation-link {text-decoration: none;color: map-get($colors,main);display: block;padding: $size-tiny;border: $border-default; }.documentation-links .documentation-link:hover, .documentation-links .documentation-link:active {color: white;background: map-get($colors,secondary);border-color: map-get($colors,secondary); }

?

　　b、Variables(變量)

　　變量名字需要以$符號開始。

$main-color:#521751; .sass-introduction {border: 0.05rem solid $main-color;background: #fae5ff;padding: 2rem;text-align: center;box-shadow: 0.2rem 0.2rem 0.1rem #ccc;width: 90%;box-sizing: border-box; }

　　編譯后：　　

.sass-introduction {border: 0.05rem solid #521751;background: #fae5ff;padding: 2rem;text-align: center;box-shadow: 0.2rem 0.2rem 0.1rem #ccc;width: 90%;box-sizing: border-box; }

　　變量表示list　

$border-default:0.05rem solid $main-color; $font-default:Arial, sans-serif; body {font-family: $font-default;margin: 0; } .sass-introduction {border: $border-default;background: #fae5ff;padding: 2rem;text-align: center;box-shadow: 0.2rem 0.2rem 0.1rem #ccc;width: 90%;box-sizing: border-box; }

　　變量表示map　

$colors: (main : #521751,secondary : #fa923f); .documentation-links .documentation-link {text-decoration: none;color: map-get($colors,main);display: block;padding: 0.2rem; }

　　　編譯后　

.documentation-links .documentation-link {text-decoration: none;color: #521751;display: block;padding: 0.2rem; }

　　變量的簡單計算　

$size-default: 1rem; .sass-introduction {border: $border-default;background: lighten(map_get($colors,main),72%);padding: $size-default * 2;text-align: center;box-shadow: $size-tiny $size-tiny 0.1rem #ccc;width: 90%;box-sizing: border-box; }

?

　　編譯后　

.sass-introduction {border: $border-default;background: lighten(map_get($colors,main),72%);padding: 2rem;text-align: center;box-shadow: $size-tiny $size-tiny 0.1rem #ccc;width: 90%;box-sizing: border-box; }

?

　　c、Sass的內置函數　

$colors: (main : #521751,secondary : #fa923f); .sass-introduction {border: $border-default;background: lighten(map_get($colors,main),72%);padding: 2rem;text-align: center;box-shadow: 0.2rem 0.2rem 0.1rem #ccc;width: 90%;box-sizing: border-box; }

?

　　編譯后：　

.sass-introduction {border: 0.05rem solid #521751;background: #f7e1f6;padding: 2rem;text-align: center;box-shadow: 0.2rem 0.2rem 0.1rem #ccc;width: 90%;box-sizing: border-box; }

　　sass中存在著大量的內置函數。

　　d、partial和import

　　sass中可以將共享的變量提取到一個單獨的文件中，然后通過@import導入使用，編譯后的css中不包含這些變量。

　　提取變量到variables.scss文件中　　　

$colors: (main : #521751,secondary : #fa923f); $border-default:0.05rem solid map-get($colors,main); $font-default:Arial, sans-serif; $size-default: 1rem; $size-tiny : 0.2rem;

?

　　在main.scss中導入就可以使用這些變量。　

@import "_variables.scss";

　　我們可以在main.scss中導入其他的scss文件，文件編譯后會被合并到同一個scss文件中，這樣可以只需要發一次http請求。而css文件的導入不會合并文件。

?

?

　　e、媒體查詢　

html {font-size: 94.75%;@media (min-width: 40rem) {font-size: 125%;} }

?

　　編譯后　

html {font-size: 94.75%; } @media (min-width: 40rem) {html {font-size: 125%;} }

　　f.inheritance　

.sass-section{border: $border-default;background: lighten(map_get($colors,main),72%);text-align: center;width: 90%;box-sizing: border-box;@media (min-width: 40rem) {width: 30rem;} } .sass-introduction {@extend .sass-section;padding: $size-default * 2;box-shadow: $size-tiny $size-tiny 0.1rem #ccc;}.sass-details {@extend .sass-section;padding: $size-default;margin: 2rem 0;}

　　編譯后　　　

.sass-section, .sass-details, .sass-introduction {border: 0.05rem solid #521751;background: #f7e1f6;text-align: center;width: 90%;box-sizing: border-box; } @media (min-width: 40rem) {.sass-section, .sass-details, .sass-introduction {width: 30rem;} } .sass-introduction {padding: 2rem;box-shadow: 0.2rem 0.2rem 0.1rem #ccc; }.sass-details {padding: 1rem;margin: 2rem 0; }

　　g、mixin

　　Sass中的混合相當自定義的函數。

@mixin display-flex(){display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex; } @mixin media-min-width($width){@media (min-width: $width){ @content;} } .container {@include display-flex();flex:{direction: column;wrap: nowrap;}align-items: center;padding: $size-default * 3 0;box-sizing: border-box; @include media-min-width(40rem){padding: 3rem 0;} }

　　里面的@content使下面的?padding: 3rem 0;

.container {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;padding: 3rem 0;box-sizing: border-box; } @media (min-width: 40rem) {.container {padding: 3rem 0;} }

　　　

轉載于:https://www.cnblogs.com/yiluhuakai/p/10760132.html

總結

以上是生活随笔為你收集整理的Sass/Scss的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。