資訊專欄INFORMATION COLUMN
摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預處理器，文件后綴名為，可以用中的來轉成樣式。
最近在項目中利用到了css預處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業余的時間里搜了一些資料來看看，看完后覺得sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內容都是本博主覺得比較有趣而且比較用得上的知識點）
- 1.sass的配置：
sass使用范圍很大，如在vue的單組件文件中可以作為樣式模板調用，react中也可以使用sass，而至于在vue，react中如何配置，本文不打算詳細闡述，有興趣的讀者可以自行查閱。
本文所有的例子都是在webstorm中編譯，而webstorm可以自行編譯sass，具體可以查看該鏈接：
webstorm配置sass
- 2.sass的概念：
定義：sass是css的一種預處理器，文件后綴名為.scss，可以用webpack中的sass-loader來轉成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中的所定義的變量不單只利用在樣式值上，還能拼接字符串，動態改變屬性的名稱；
用法：#{$變量}
eg：
$a:left;
$b:#888;
.box1{border-#{$a}-color : $b}
- 計算功能
在項目中，如果用到sass，定義變量時都會定義一些常用的值作為sass的變量，但如果在寫樣式時如font-size的值在常用變量中沒有定義，那么可以利用sass變量的計算能力（加減乘除）
- 嵌套
定義：若幾個節點存在存在親屬關系，則在sass上可以用嵌套的方式來代替原css中的后代選擇器；如果在嵌套中想調用父元素，則可以用&代替；
- 媒體查詢
在sass中@media可以不用寫在外層，直接嵌套在對應的選擇器里面寫響應式；
eg：
未改變之前：
改變之后：
B）復用：
- 繼承
定義：在sass中允許一個選擇器繼承另一個選擇器的全部樣式；
語法： 選擇器 { @extend 另一個選擇器 }
eg:
- mixin
定義：在sass中，可以利用@mixin來定義一個復用塊，而且該復用塊還能引入參數和參數的默認值。
語法：
定義復用塊 @mixin name （param1：default1 ，param2：default2，...）{ }
引用復用塊 選擇器{
@include name (val1,val2,...)
}
eg:
（mixin.scss文件）
（調用文件）
插入文件
這個知識點在css中就已經存在，就是將css模塊化處理，然后利用@import來調用；上面的例子就是利用了這個知識點，一般情況下，在項目開發過程中，也推薦這種做法。
C）高級用法：
條件用法
定義：sass中可以像js一樣采用條件判斷語句選擇性采用合適的樣式塊；
語法：
@if （confident） { 樣式塊1 }
@else { 樣式塊2 }
eg:
注意：如果mixin中，有些參數有默認值，有些參數沒有，則沒有默認值的參數要放在參數列表的前面。
循環用法
定義：sass中不僅僅可以用條件語句，還可以調用循環語句；sass中的循環語句有@for 和@while，用法基本一致。
語法： @for $i from start to end { 樣式 } ，@while confident { 樣式 }
注意：@for 是從start到end但不包含end；
eg：
自定義函數
定義：在sass中還能自定義函數，但必須要有返回值，而且要在調用前定義該函數。
語法：
@function name （） { return }
eg：
sass的內容遠不止這些，如果看完本博客后也有興趣繼續深入學習sass，可以去看一下官方文檔：
sass中文文檔
官方文檔
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116615.html
摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內網絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結構預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...
摘要：聲明聲明本篇內容梳理自以下幾個來源網站的文檔中文網感謝大佬們的分享。這個時候，預處理器就出現了，其實應該是說和這類語言出現了。聲明 本篇內容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網站的 less 文檔 Sass中文網 感謝大佬們的分享。 正文-CSS預處理（less&Sass） CSS預處理 什么是 CSS 預處理？為什么要有 CSS 預處理？ 這...
摘要：在吸取了的一些特性基礎上，有了大幅改進，也就是現在的。嵌套極大程度上降低了選擇器名稱和屬性的重復書寫。選擇器嵌套選擇器嵌套是指從一個選擇器中嵌套子選擇器，來實現選擇器的繼承關系。也已經成為的一個標配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫，它是css的一個開發工具，提供了很多便利和簡單的語法，讓css看起來更像是一門...
摘要：當你改變一些基本配色之后，你會發現框架完全不同了。的變量以開頭，賦值與相同，后面的代表它是可覆蓋的。通過遍歷字典，拿到和，設置相應的值即可。 這是一個系列，帶著大家封裝一個純 CSS 框架，從零學習 SASS 語法。 代碼倉庫點我傳送 showImg(https://segmentfault.com/img/remote/1460000015635558?w=221&h=202); 因...
閱讀 3992·2021-11-22 15:31
閱讀 2532·2021-11-18 13:20
閱讀 3116·2021-11-15 11:37
閱讀 7047·2021-09-22 15:59
閱讀 748·2021-09-13 10:27
閱讀 3785·2021-09-09 09:33
閱讀 1449·2019-08-30 15:53
閱讀 2570·2019-08-29 15:37
