sass的基本使用

alighters 發(fā)布于2019-08-30 15:53 / 1434人閱讀

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預處理器，文件后綴名為，可以用中的來轉(zhuǎn)成樣式。

最近在項目中利用到了css預處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業(yè)余的時間里搜了一些資料來看看，看完后覺得sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內(nèi)容都是本博主覺得比較有趣而且比較用得上的知識點）

- 1.sass的配置：

sass使用范圍很大，如在vue的單組件文件中可以作為樣式模板調(diào)用，react中也可以使用sass，而至于在vue，react中如何配置，本文不打算詳細闡述，有興趣的讀者可以自行查閱。
本文所有的例子都是在webstorm中編譯，而webstorm可以自行編譯sass，具體可以查看該鏈接：
webstorm配置sass
- 2.sass的概念：

定義：sass是css的一種預處理器，文件后綴名為.scss，可以用webpack中的sass-loader來轉(zhuǎn)成css樣式。
ps：因為sass是基于ruby編寫的，所以需要安裝ruby后才能下載sass，才可以用；

- 3.sass的基本使用方法：

A）基本用法：

- 變量

語法：$變量名：變量值 ;
用途：在sass中，可以定義一些項目中常用的樣式變量，如font-size，color，background-color等；
eg：

      $a:12px;
      .box1{font-size:$a;}
      .box2{font-size:$a + 2px}

ps：sass中的所定義的變量不單只利用在樣式值上，還能拼接字符串，動態(tài)改變屬性的名稱；
用法：#{$變量}
eg：

      $a:left;
      $b:#888;
      .box1{border-#{$a}-color : $b}

- 計算功能

在項目中，如果用到sass，定義變量時都會定義一些常用的值作為sass的變量，但如果在寫樣式時如font-size的值在常用變量中沒有定義，那么可以利用sass變量的計算能力（加減乘除）

- 嵌套

定義：若幾個節(jié)點存在存在親屬關系，則在sass上可以用嵌套的方式來代替原css中的后代選擇器；如果在嵌套中想調(diào)用父元素，則可以用&代替；

- 媒體查詢

在sass中@media可以不用寫在外層，直接嵌套在對應的選擇器里面寫響應式；
eg：

未改變之前：

改變之后：

B）復用：

- 繼承

定義：在sass中允許一個選擇器繼承另一個選擇器的全部樣式；
語法：選擇器 { @extend 另一個選擇器 }

eg:

- mixin

定義：在sass中，可以利用@mixin來定義一個復用塊，而且該復用塊還能引入?yún)?shù)和參數(shù)的默認值。
語法：

 定義復用塊  @mixin name （param1：default1 ，param2：default2，...）{   }
 引用復用塊  選擇器{
                    @include name (val1,val2,...)
                  }

eg:
（mixin.scss文件）

（調(diào)用文件）

插入文件

這個知識點在css中就已經(jīng)存在，就是將css模塊化處理，然后利用@import來調(diào)用；上面的例子就是利用了這個知識點，一般情況下，在項目開發(fā)過程中，也推薦這種做法。

C）高級用法：

條件用法

定義：sass中可以像js一樣采用條件判斷語句選擇性采用合適的樣式塊；
語法：

  @if （confident） { 樣式塊1 }
  @else { 樣式塊2 }

eg:

注意：如果mixin中，有些參數(shù)有默認值，有些參數(shù)沒有，則沒有默認值的參數(shù)要放在參數(shù)列表的前面。

循環(huán)用法

定義：sass中不僅僅可以用條件語句，還可以調(diào)用循環(huán)語句；sass中的循環(huán)語句有@for 和@while，用法基本一致。
語法： @for $i from start to end { 樣式 } ，@while confident { 樣式 }
注意：@for 是從start到end但不包含end；
eg：

自定義函數(shù)

定義：在sass中還能自定義函數(shù)，但必須要有返回值，而且要在調(diào)用前定義該函數(shù)。
語法：

  @function name （） { return  }

eg：

sass的內(nèi)容遠不止這些，如果看完本博客后也有興趣繼續(xù)深入學習sass，可以去看一下官方文檔：
sass中文文檔
官方文檔

云服務器 GPU云服務器數(shù)據(jù)庫的基本使用 linux基本命令的使用實驗一云服務器的基本使用 python基本使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116615.html

sass的基本使用

摘要：嵌套可以進行選擇器的嵌套，表示層級關系，看起來很優(yōu)雅整齊。擴展繼承可通過來實現(xiàn)代碼組合聲明，使代碼更加優(yōu)越簡潔。運算可進行簡單的加減乘除運算等顏色中集成了大量的顏色函數(shù)，讓變換顏色更加簡單。 1.變量 sass中可以定義變量，方便統(tǒng)一修改和維護。 //sass style //----------------------------------- $fontStack: Hel...

_DangJin 2019-08-30 13:48 評論0 收藏0
CSS 強化裝備！Sass 安裝與使用

摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內(nèi)網(wǎng)絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結(jié)構(gòu)預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 評論0 收藏0
前端入門23-CSS預處理器（Less&Sass）

摘要：聲明聲明本篇內(nèi)容梳理自以下幾個來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個時候，預處理器就出現(xiàn)了，其實應該是說和這類語言出現(xiàn)了。聲明本篇內(nèi)容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。正文-CSS預處理（less&Sass） CSS預處理什么是 CSS 預處理？為什么要有 CSS 預處理？這...

freecode 2019-04-23 13:07 評論0 收藏0
前端利器：SASS基礎與Compass入門

摘要：在吸取了的一些特性基礎上，有了大幅改進，也就是現(xiàn)在的。嵌套極大程度上降低了選擇器名稱和屬性的重復書寫。選擇器嵌套選擇器嵌套是指從一個選擇器中嵌套子選擇器，來實現(xiàn)選擇器的繼承關系。也已經(jīng)成為的一個標配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫，它是css的一個開發(fā)工具，提供了很多便利和簡單的語法，讓css看起來更像是一門...

娣辯孩 2019-08-28 17:54 評論0 收藏0
開發(fā)一個自己的 CSS 框架（一）

摘要：當你改變一些基本配色之后，你會發(fā)現(xiàn)框架完全不同了。的變量以開頭，賦值與相同，后面的代表它是可覆蓋的。通過遍歷字典，拿到和，設置相應的值即可。這是一個系列，帶著大家封裝一個純 CSS 框架，從零學習 SASS 語法。代碼倉庫點我傳送 showImg(https://segmentfault.com/img/remote/1460000015635558?w=221&h=202); 因...

funnyZhang 2019-08-30 15:54 評論0 收藏0