sass的基本使用

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

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

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

- 1.sass的配置：

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

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

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

A）基本用法：

- 變量

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

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

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

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

- 計(jì)算功能

在項(xiàng)目中，如果用到sass，定義變量時(shí)都會(huì)定義一些常用的值作為sass的變量，但如果在寫樣式時(shí)如font-size的值在常用變量中沒(méi)有定義，那么可以利用sass變量的計(jì)算能力（加減乘除）

- 嵌套

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

- 媒體查詢

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

未改變之前：

改變之后：

B）復(fù)用：

- 繼承

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

eg:

- mixin

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

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

eg:
（mixin.scss文件）

（調(diào)用文件）

插入文件

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

C）高級(jí)用法：

條件用法

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

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

eg:

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

循環(huán)用法

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

自定義函數(shù)

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

  @function name （） { return  }

eg：

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116615.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

alighters

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

鴻蒙輕內(nèi)核虛擬內(nèi)存基礎(chǔ)知識(shí)：虛擬內(nèi)存進(jìn)程空間編號(hào)

閱讀 4044·2021-11-22 15:31
半月灣HmbCloud：美國(guó)洛杉磯三網(wǎng)CN2 GIA VPS;1Gbps帶寬,七折年付$69.99

閱讀 2604·2021-11-18 13:20
基于Tableau探索分析世界銀行提供的關(guān)于科學(xué)技術(shù)的數(shù)據(jù)

閱讀 3187·2021-11-15 11:37
虛擬主機(jī)32G有多少內(nèi)存-電腦有32G內(nèi)存，虛擬內(nèi)存應(yīng)該設(shè)為多大？

閱讀 7322·2021-09-22 15:59
Epic v. Apple案審判結(jié)果：蘋果必須允許其他形式的應(yīng)用內(nèi)購(gòu)買

閱讀 818·2021-09-13 10:27
從自考大專到出走騰訊，我的經(jīng)歷值得每個(gè)測(cè)試人借鑒

閱讀 3843·2021-09-09 09:33
sass的基本使用

閱讀 1506·2019-08-30 15:53
前端每日實(shí)戰(zhàn)：43# 視頻演示如何用純 CSS 繪制一個(gè)充滿動(dòng)感的 Vue logo

閱讀 2632·2019-08-29 15:37

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

sass的基本使用

相關(guān)文章