scss基本用法總結

2022-02-27 00:52:24 字數 1000 閱讀 1912

工作的時候天天用，面試的時候卻沒了思路，這就是懶得下場。多總結，多整理，才是成長得王道啊。最近換工作，把以前該整理得工作梳理一遍。

$color: #f00;


$a-color: #ff0;


$b_color: #009;


.btn

子元素 >

~ 同層全體組合選擇器

.div 


a } h2,h3,h4 


}
這個注釋不會出現在css中，

//這是注釋

這個註冊會出現在css中

/* 這裡是注釋 */

@mixin rounded-corners($px) 


.div
a 


.disabled
計算的使用，主要用在寫移動端自適應的時候

1、首先計算移動客戶端螢幕寬度，將document的font-size設定為px

(function init())()
2、利用1rem為html的fontsize的大小

// 設計圖是750px的話


$basepx:750;


@function pxcount($px)


.div
rem em 常見於自適應頁面的尺寸，瀏覽器會根據頁面轉化成畫素值；

1rem 為html中fontsize的值

em 它們是相對於使用em單位的元素的字型大小。由於繼承的存在，em很多時候會顯示成相對于父元素的大小。

px 物理畫素

Scss基本用法

scss使用 符號來標識變數。變數有作用域，外部不能引用內部變數。在宣告變數時可以引用其他變數。變數名可以與css中的屬性名和選擇器名稱相同，推薦使用中劃線分隔。border width 1px border width solid black div 編譯後 div如果變數需要鑲嵌在字串之中，就必...

scss基本用法

color red border style 1px solid green box1編譯後得到得css如下 box1 1 father 編譯的css如下 father father son 2 引用父級選擇器 father 編譯的css father father hover 1 基本用法 mix...

SCSS 的基本使用

首先，用一句話說明 sass scss的關係 sass就是css的預處理器，scss是sass3版本中引入的新語法特性。然後，我們來看怎麼使用呢？像日常一樣，需要安裝npm 包再使用哦 cnpm i s node sass sass loader，當然這裡你是用npm yarn 安裝都是可以的！我們...