變量

$ 符號(hào)來(lái)標(biāo)識(shí)變量；把反復(fù)使用的css屬性值定義成變量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 變量中可存在變量

a {
  color: $link_color; // 中劃線和下劃線等價(jià)，包括對(duì)混合器和Sass函數(shù)的命名
}

繼承

繼承是基于類class的（有時(shí)是基于其他類型的選擇器）

允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：

.class1 {
border: 1px solid #ddd;}

// class2要繼承class1，就要使用@extend命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }

混合器Mixin

避免不停地重復(fù)一段樣式（定義：@mixin、引用：@include）

// 使用@mixin命令，定義一個(gè)代碼塊。
@mixin left {
　　float: left;
　　margin-left: 10px;
}
//使用@include命令，調(diào)用這個(gè)mixin。
div {
　　@include left;
}
　　
// mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。
@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
}
// 使用的時(shí)候，根據(jù)需要加入?yún)?shù)：
div {
　　@include left(20px);
}

插入文件

Sass 拓展了 @import 的功能，允許其導(dǎo)入 SCSS 或 Sass 文件。被導(dǎo)入的文件將合并編譯到同一個(gè) CSS 文件中，另外，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。

@import "foo.scss"; //都會(huì)導(dǎo)入文件 foo.scss
@import "foo"; //都會(huì)導(dǎo)入文件 foo.scss
@import "http://foo.com/bar";  // 插入外部文件
@import "foo.css"; // 等同于css的import命令

scss總結(jié)

這里只是簡(jiǎn)單介紹 scss 最基本部分,使用 scss 可以編寫(xiě)清晰、無(wú)冗余、語(yǔ)義化的 css。

變量是 scss 提供的最基本的工具。通過(guò)變量可以讓獨(dú)立的 css 值變得可重用，無(wú)論是在一條單獨(dú)的規(guī)則范圍內(nèi)還是在整個(gè)樣式表中。

變量、混合器的命名甚至 scss 的文件名，可以互換通用_和-。

同樣基礎(chǔ)的是 scss 的嵌套機(jī)制。嵌套允許css規(guī)則內(nèi)嵌套css規(guī)則，減少重復(fù)編寫(xiě)常用的選擇器，同時(shí)讓樣式表的結(jié)構(gòu)一眼望去更加清晰。scss同時(shí)提供了特殊的父選擇器標(biāo)識(shí)符 & ，通過(guò)它可以構(gòu)造出更高效的嵌套。

混合器允許用戶編寫(xiě)語(yǔ)義化樣式的同時(shí)避免視覺(jué)層面上樣式的重復(fù)。使用混合器減少重復(fù)，使用混合器讓你的css變得更加可維護(hù)和語(yǔ)義化。

與混合器相輔相成的選擇器繼承。繼承允許你聲明類之間語(yǔ)義化的關(guān)系，通過(guò)這些關(guān)系可以保持你的css的整潔和可維護(hù)性。

樣式導(dǎo)入，scss 的另一個(gè)重要特性。通過(guò)樣式導(dǎo)入可以把分散在多個(gè)sass文件中的內(nèi)容合并生成到一個(gè)css文件，避免了項(xiàng)目中有大量的css文件通過(guò)原生的css @import帶來(lái)的性能問(wèn)題。通過(guò)嵌套導(dǎo)入和默認(rèn)變量值，導(dǎo)入可以構(gòu)建更強(qiáng)有力的、可定制的樣式。

總結(jié)

以上是生活随笔為你收集整理的scss代码的重用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。