碼上歡樂
相關內容    簡體    繁體

SCSS入門

本文轉載自   查看原文   2019-01-14 11:03   1116    sass

1. CSS預處理器

  • 定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏覽器的兼容問題，讓CSS更加簡潔，適應性更強，可讀性更佳，更易於代碼的維護等諸多好處。
  • CSS預處理器語言：scss（sass）、LESS等；

2.Sass和SCSS的區別

  • 文件擴展名不同：“.sass”和“.scss”；
  • Sass是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似。

3.Sass安裝（Windows版）

 
Paste_Image.png
  • 安裝sass：
  • 方法一（通過命令安裝sass）：打開命令終端，輸入：gem install sass
  • 方法二（本地安裝sass）：從http://rubygems.org/gems/sass 下載sass安裝包，然后在終端輸入: “gem install <把下載的安裝包拖到這里>” 然后直接額回車即可安裝成功。

4.scss語法格式

css代碼：

body { font: 100% Helvetica, sans-serif; color: #333; }

使用scss代碼：

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

tip:如果使用sass舊語法（sass語法），文件后綴名應為“.sass”；如果使用sass新語法（scss語法），文件后綴名應為".scss“語法，否則編譯時編譯不出來。

5. sass編譯

5.1 sass編譯的方法：

  • 命令編譯
  • GUI工具編譯
  • 自動化編譯

5.1.1 sass命令編譯（在命令終端輸入sass指令來編譯sass，最直接，最簡單）

  • 單文件編譯：
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
  • 多文件編譯：
sass sass/:css/

上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，並且將這些 CSS 文件都放在項目中“css”文件夾中。

  • 缺點及解決方法：
    缺點：每次保存scss文件后都要重新編譯太麻煩；
    解決方法：開啟“watch”功能：
sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
  • tip:文件路徑不要帶中文，如果有中文，watch功能無法正常使用。

6.sass嵌套輸出方式nested

 
Paste_Image.png

只要在編譯的時候帶上參數“ --style nested”:

sass --watch test.scss:test.css --style nested

7.sass展開輸出方式expanded

 
Paste_Image.png

在編譯的時候帶上參數“ --style expanded”:

sass --watch test.scss:test.css --style expanded

8.sass展開輸出方式compact

 
Paste_Image.png

在編譯的時候帶上參數“ --style compact”:

sass --watch test.scss:test.css --style compact

9.sass展開輸出方式compressed

 
Paste_Image.png

在編譯的時候帶上參數“ --style compressed”:

sass --watch test.scss:test.css --style compressed

10.sass變量聲明

$+變量名+：+變量值；

$width:200px;

11.普通變量和默認變量

  • 普通變量聲明后可以在全局范圍內使用；
  • 默認變量僅需在值后面加上!default 即可；
  • 默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式是在默認變量之前重新聲明下變量即可。默認變量的價值在進行組件化開發的時候會非常有用。
$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body { line-height: $baseLineHeight; }

編譯后的CSS代碼：

body { line-height:2; }

12.局部變量和全局變量

  • 局部變量：在元素里面聲明的變量；
  • 全局變量：在元素外面定義的變量；
  • 全局變量的影子：和全局變量名字相同的局部變量叫做全局變量的影子。
$color:green;//全局變量 $width:200px;//全局變量 $height:200px;//全局變量 body { background-color:$color;//調用全局變量 } div { $color:yellow;//定義局部變量，全局變量$color的影子 .div { background-color:$color;//調用局部變量 width:$width;//調用全局變量 height:$height;//調用全局變量 } }

13.sass嵌套

13.1 選擇器嵌套

<header> <nav> <a href="#">home</a> <a href="#">page</a> </nav> </header>

css:

    nav a { color:red; } header nav a { color:green; }

scss:

nav {
  a {
    color: red;
    
    header & {
      color:green;
    }
  }  
}

13.2 屬性嵌套(有相同的屬性前綴)

css:

.box { font-size: 12px; font-weight: bold; }

scss:

.box { font: { size: 12px; weight: bold; } }

13.3 偽類嵌套

scss:

.clearfix{
&:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }

css:

clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }

14. sass混合宏

14.1 聲明混合宏

@mixin border-radius { -webkit-border-radius: 5px; border-radius: 5px; }

@mixin :聲明混合宏的關鍵詞；
border-radius:混合宏的名稱；
大括號內：復用的樣式代碼；

14.2 調用混合宏

@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }//聲明混合宏border-radius button { @include border-radius; }//調用混合宏border-radius

編譯為CSS：

button { -webkit-border-radius: 3px; border-radius: 3px; }

14.3 混合宏的參數

  • 不帶任何值的參數
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}//聲明一個帶有參數$radius的混合宏 .box { @include border-radius(3px);//調用混合宏並給混合宏傳參數“3px” }
  • 傳一個帶值參數（傳入一個默認值）
@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; }//聲明一個傳入了默認參數值的混合宏 .btn { @include border-radius;//使用默認參數值的混合宏 } .box { @include border-radius(50%);//可以自己傳入參數值 }

編譯出來的CSS：

.btn { -webkit-border-radius: 3px; border-radius: 3px; } .box { -webkit-border-radius: 50%; border-radius: 50%; }
  • 傳多個參數值
@mixin size($width,$height){
  width: $width; height: $height; } .box-center { @include size(500px,300px); }

編譯出來的css：

.box-center { width: 500px; height: 300px; }

15.sass 繼承

scss：

.btn {
  border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff;  @extend .btn; }

編譯出來后：

.btn, .btn-primary { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; }

在sass中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來的css會將選擇器合並在一起，形成組合選擇器。

16.sass占位符%

用占位符聲明的代碼，如果不被@extend調用就不會被編譯。

%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { color:red; }

編譯后：

.btn {
    color:red;
}//%占位符聲明的代碼沒有被編譯產生css代碼

使用@extend調用：

%mt5 {
  margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5;//使用@extend調用占位符代碼 @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }

編譯后的css代碼：

.btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }

通過@extend調用的占位符，編譯出來的代碼會將相同的代碼合並在一起，代碼變得十分簡潔。

17.sass插值

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {//對每個在$properties中的$prop,即$properties中的margin、padding #{$prop}-#{$side}: $value;//$prop連接參數$side，值為參數$value } } .login-box { @include set-value(top, 14px);//調用混合宏 }

編譯出來的css：

.login-box { margin-top: 14px; padding-top: 14px; }

不可以：

$margin-big: 40px; $margin-medium: 20px; $margin-small: 12px; @mixin set-value($size) { margin-top: $margin-#{$size}; } .login-box { @include set-value(big); }

也不可以：

@mixin updated-status {
    margin-top: 20px; background: #F00; } $flag: "status"; .navigation { @include updated-#{$flag}; }

可以在使用@extend時使用插值：

%updated-status {
    margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; }

18. sass 注釋

  • /*注釋內容*/ :會在編譯出來的css文件中顯示
  • //注釋內容 ：不會在編譯出來的css文件中顯示
//定義一個占位符 %mt5 { margin-top: 5px; } /*調用一個占位符*/ .box { @extend %mt5; }

編譯出來的css：

.box { margin-top: 5px; } /*調用一個占位符*/

19. sass運算

19.1 sass 加法/減法

變量或屬性中都可以做加法/減法運算

.box { width: 20px + 8in; height:20px - 5px; }

編譯出來的css：

.box { width: 788px; height:25px; }

不用類型的單位做加法/減法會報錯：

.box {
  width: 20px + 1em;//不同類型單位不能做加法 }

19.2 sass 乘法

這樣子會有問題：

.box { width:10px * 2px; }

應該這樣子：

.box { width: 10px * 2; }

編譯出來的css：

.box { width: 20px; }
  • 同加法減法一樣，不同類型單位做乘法也會報錯。

19.3 sass除法

  • 如果除式中沒有變量或者不是在一個數學表達式中（有加法減法等），就要將除式運算用小括號括起來，否則“/”不會被當做除號運算。
p {
  font: 10px/8px; // 純 CSS，不是除法運算 $width: 1000px; width: $width/2; // 使用了變量，是除法運算 width: round(1.5)/2; // 使用了函數，是除法運算 height: (500px/2); // 使用了圓括號，是除法運算 margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算 }

編譯出來的css：

p {
  font: 10px/8px;//這種是無意義的css width: 500px; height: 250px; margin-left: 9px; }
  • 除法中相同單位相除不會報錯，會產生一個無單位的值：
.box { width: (1000px / 100px); }

編譯出來的css：

.box { width: 10; }

19.4 sass 變量計算

$content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container { width: $content-width + $sidebar-width + $gutter; }

編譯出來的css：

.container { width: 960px; }

19.5 sass數字運算

.box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }

編譯出來的css：

.box { width: 60px; }

19.6 sass顏色運算

所有算術運算都支持顏色值，並且是分段計算的。

p { color: #010203 + #040506; }

計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 並且被合成為：

p { color: #050709; }
  • 數字和顏色一起運算：
p { color: #010203 * 2; }

計算公式為 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 並且被合成為：

p { color: #020406; }

19.7 sass 字符運算

  • 用“+”對字符串進行連接：
$content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; }

編譯出來的css：

.box:before { content: " Hello Sass! "; }
  • 可以使用“+”直接連接字符：
div { cursor: e + -resize; }

編譯出來的css：

div { cursor: e-resize; }
  • 有引號的字符串和沒有引號的字符串相加，看哪個在“+”號的左邊，如果有引號的在左邊，結果為有引號的；如果沒有引號的在左邊，結果為沒有引號的：
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }

編譯出來的css：

p:before { content: "Foo Bar"; font-family: sans-serif; }

鏈接：https://www.jianshu.com/p/fa379a309c8a
來源：簡書






免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 scss使用后的簡單入門總結 rem 結合 scss 移動端自適應 初級入門demo SCSS引入通用SCSS scss的基本用法 安裝SCSS SCSS是什么 SCSS詳解 scss之&的用法 Scss換膚 dart-scss 替代node-scss
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM