sass入門初體驗

2021-09-17 18:50:04 字數 2163 閱讀 8170

接上文less入門初體驗,接下來講講sasssass有兩種檔案字尾名,一種是.sass,另一種是.scss。前者類似於ruby的語法規則,沒有花括號,沒有分號,具有嚴格的縮排;而後者更貼近於css的語法規則,易於閱讀,更具語義性,所以本文採用.scss字尾名來編寫sass**

編譯1、ruby:

sass是由ruby語言編寫的,所以我們可以通過ruby來編輯sass**,首先需要安裝ruby,然後再安裝sass,之後通過sass命令編譯檔案

sudo apt install ruby

sudo gem install sass

sass style.scss style.css

sass提供四個編譯風格的選項:

nested:巢狀縮排的css**,預設值

expanded:沒有縮排的、擴充套件的css**

compact:簡潔格式的css**

compressed:壓縮後的css**

生產環境中一般使用最後乙個

sass --style compressed style.scss style.css
變數

變數使用以$開頭(這也是我喜愛sass多於less的原因,誰不喜歡money呢?o(∩_∩)o哈哈~,開個玩笑),如果變數需要在字串中使用,只需要寫在#{}中即可

$color:#999;

$side:left;

$bw:2px;

div -width: $bw;

}

編譯後:

div
mixin(混合)

實現**塊的重用,使用@mixin定義乙個**塊,通過@include就可以呼叫此**塊

@mixin b_r($radius:5px)

div1

div2

編譯後:

div1 

div2

巢狀

less類似,不多介紹

div 

}}

編譯後:

div 

div a

div a:hover

運算

less類似,不多介紹

$w:1000px;

body

}

編譯後:

body 

body div

顏色函式

div
編譯後:

div
注釋

/* hello sass 我依然在這裡 */

div1

// hello sass 我不見了

div2

/*! hello sass 即使壓縮了,我依然還在 */

div3

編譯後:

@charset "utf-8";

/* hello sass 我依然在這裡 */

div1

div2

/*! hello sass 即使壓縮了,我依然還在 */

div3

CSS之Sass初體驗

sass背景是ruby語言寫的,增加了變數,巢狀,混合,匯入等功能,可依賴ruby模組 在windows安裝 本章依賴於node後台,將sass包,解壓縮至node安裝位址。scss 為副檔名 sass,可以理解為一種css的預處理器,用於進行網頁樣式設計,再編譯成正常的css檔案 options ...

Dart 入門初體驗

簡介 dart 是谷歌公司研發的主要用於web以及移動開發的一門語言,而其中最耳熟能詳的就是基於 dart 語言開發的 kotlin 框架,它著重解決了手機端跨平台的問題。環境搭建 這裡 dart 環境的搭建可以參考 語法入門 1 列印 helloworld void main 2 變數的定義,支援...

「黑客」入門 爬蟲scrapy初體驗

歡迎關注,敬請點讚!pip install scrapy 需要在專案根目錄下,如d python spider 執行 scrapy startproject 專案名 如 lab d python spider scrapy startproject lab 進入專案內 cd 專案名,d python...