sass,less相關語法

2021-09-21 17:46:54 字數 488 閱讀 5135

sass,less都是css預處理器,css預處理器是一種專門的語言,可以被編譯成正常的css

ruby是開源的伺服器端指令碼語言

scss字尾名為.scss, sass是用ruby語言編寫的,執行scss,必須先安裝ruby環境

可以使用koala或者webpack將sass,less編譯成css檔案

sass語法

可以使用定義變

量如

定義變數 如

定義變數

如size:100px;

可以進行選擇器的巢狀,可以在巢狀的內部使用&表示選擇器的繼承

可以使用@extend 類名 繼承某個類的樣式

混用:可以傳參

可以寫邏輯,if和for迴圈,不加括號,if和for前面加@

字尾名為,less

less語法

宣告變數使用@變數名:值

混入:將定義好的樣式引入另乙個樣式中,類似於函式呼叫

繼承字型圖示的使用

CSS預編譯工具(SASS,LESS)

sass和less都是專用於css的預編譯語言,他們2者的功能,操作都是大同小異。less稍微簡單一些,而sass有一些比較成熟的框架 如compass 功能強大一些,其中的語法也比較符合一門程式語言的習慣,比如說函式,作用域,程序控制等等。所以,我也是選擇的sass來使用。一 sass中文官網 使...

Sass Less中mixin的用法

1.布局 flex布局復用 mixin flex hov space between,col center after偽類加小圖示 mixin bgimg w 0,h 0,img size contain 固定定位,相容ie6 mixin fixed 水平豎直方向居中 translate mixin...

oracle sql相關語法

case when 簡單case函式 case when 1 then 男 when 2 then 女 else 其他 end case搜尋函式 case when 1 then 男 when 2 then 女 else 其他 end這兩種方式,可以實現相同的功能。簡單case函式的寫法相對比較簡潔...