柚子快報(bào)邀請(qǐng)碼778899分享：【前端學(xué)習(xí)筆記】CSS基礎(chǔ)三

http://yzkb.51969.com/

一、CSS變量

CSS變量，也稱為CSS自定義屬性，是CSS3的一部分，允許開發(fā)者在CSS中定義和使用變量。這些變量可以存儲(chǔ)值，然后在整個(gè)文檔中重復(fù)使用這些值。使用CSS變量可以提高樣式表的可維護(hù)性，并且使得主題和設(shè)計(jì)變量的更改更加容易。

1.基本使用

聲明一個(gè)自定義屬性，屬性名以兩個(gè)減號(hào)（--）開始，屬性值可以是任何有效的CSS值，并且這個(gè)屬性和其他屬性一樣可以寫在規(guī)則集之內(nèi)，變量可以在定義它們的選擇器及其后代元素中使用。如果需要全局變量，可以定義在:root偽類中。通常放在:root偽類選擇器中。:root偽類代表文檔的根元素，通常是元素。在使用CSS變量時(shí)，使用 var() 函數(shù)包裹所需變量的變量名即可。除了變量名之外，var() 還有第二個(gè)參數(shù)——備用值。在發(fā)現(xiàn)變量值不可訪問(wèn)的情況下，將使用備用值來(lái)代替它。（瀏覽器支持變量，并且該變量設(shè)置為無(wú)效值，則使用瀏覽器的默認(rèn)值）可以在運(yùn)行時(shí)通過(guò)JavaScript動(dòng)態(tài)更新變量的值，從而改變整個(gè)文檔的樣式。獲?。簑indow.getComputedStyle(element).getPropertyValue('--color')，設(shè)置：element.style.setProperty('--color', 'blue'); （這里的getComputedStyle是用于獲取指定元素計(jì)算后實(shí)際渲染后的所有樣式屬性，然后再用getPropertyValue獲取具體的值，而element.style是元素對(duì)象的屬性，可以設(shè)置。CSS 變量可以通過(guò) CSS 層疊機(jī)制進(jìn)行繼承?？梢栽诿襟w查詢中重新設(shè)置變量，這些重新設(shè)置的值可以在任何地方使用，這是預(yù)處理器變量無(wú)法實(shí)現(xiàn)的。CSS變量的變量名（即屬性名）對(duì)大小寫是敏感的，不能使用CSS現(xiàn)有屬性名。

2.SASS變量

SASS 變量在定義時(shí)需在變量名前加上“$”，在使用變量時(shí)直接使用定義的變量名即可，SASS 的問(wèn)題就在于它是一個(gè)預(yù)處理器，所以，任何在 SASS 中聲明的變量都需要經(jīng)過(guò)編譯才能執(zhí)行。不能在運(yùn)行時(shí)更改變量值

預(yù)處理器SASS中的變量范圍就是嵌套的大括號(hào)塊。而由于 CSS 變量是屬性，所以它們的作用域是基于 DOM 的。這意味著 CSS 變量是按元素解析的，而不是按作用域解析的。

CSS變量是動(dòng)態(tài)分配的。它們?cè)陧?yè)面的整個(gè)生命周期中會(huì)保持活動(dòng)狀態(tài)，當(dāng)更新它們時(shí)，所有引用它們的地方都會(huì)更新。因?yàn)樗鼈兪菍傩?，所以可以通過(guò)任何更新 CSS 屬性的機(jī)制來(lái)更新它們：樣式表、內(nèi)聯(lián)樣式，甚至 JavaScript。

3.CSS函數(shù)

CSS中的函數(shù)通常用于在樣式表中執(zhí)行特定的操作，比如顏色混合、轉(zhuǎn)換單位、獲取屬性值等。以下是一些常見(jiàn)的CSS函數(shù)：

RGBA/HSLA：

rgba(red, green, blue, alpha)：定義一個(gè)RGBA顏色值，其中alpha是透明度。hsla(hue, saturation, lightness, alpha)：定義一個(gè)HSLA顏色值。 background-color: rgba(255, 255, 255, 0.5);

background-color: hsla(120, 100%, 50%, 0.5);

顏色調(diào)整函數(shù)：

color()：CSS4中新增的函數(shù)，用于創(chuàng)建顏色值，可以指定顏色空間。 變換函數(shù)：

translate(x, y)：在2D空間中移動(dòng)元素。rotate(angle)：旋轉(zhuǎn)元素。scale(x, y)：縮放元素。skew(x-angle, y-angle)：傾斜元素。matrix(a, b, c, d, e, f)：應(yīng)用2D變換矩陣。 transform: rotate(45deg) scale(1.5);

漸變函數(shù)：

linear-gradient(angle, color-stop1, color-stop2, ...)：創(chuàng)建線性漸變。radial-gradient(shape, color-stop1, color-stop2, ...)：創(chuàng)建徑向漸變。 background-image: linear-gradient(to right, red, yellow);

陰影函數(shù)：

box-shadow(x-offset, y-offset, blur-radius, spread-radius, color)：添加盒子陰影。text-shadow(x-offset, y-offset, blur-radius, color)：添加文本陰影。 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

text-shadow: 2px 2px 2px #000;

形狀函數(shù)：

circle(radius)：定義圓形。ellipse(radii)：定義橢圓形。inset(rectangle)：定義內(nèi)嵌矩形。 shape-outside: circle(50%);

圖像函數(shù)：

url(image-url)：引用外部圖像。image-set(image1x, image1.5x 1.5x, image2x 2x)：為不同分辨率定義多個(gè)圖像。 background-image: url('background.jpg');

屬性函數(shù)：

attr(attribute-name)：從元素的屬性獲取值。 content: attr(data-title);

環(huán)境變量：

env(variable-name)：訪問(wèn)瀏覽器環(huán)境的變量。 自定義函數(shù)：

CSS本身不支持自定義函數(shù)，但可以通過(guò)calc()、var()等函數(shù)實(shí)現(xiàn)類似效果。 width: calc(100% - 20px);

color: var(--main-color);

數(shù)學(xué)函數(shù)：

calc(expression)：執(zhí)行CSS表達(dá)式計(jì)算。min(max, value1, ...)：取最大值中的最小值。max(min, value1, ...)：取最小值中的最大值。 width: calc(50% + 20px);

這些函數(shù)可以提高CSS的靈活性和表達(dá)能力，使得樣式的編寫更加動(dòng)態(tài)和響應(yīng)式。隨著CSS規(guī)范的不斷發(fā)展，未來(lái)可能會(huì)引入更多的函數(shù)。

二、SASS

1.基本定義

Sass 是一個(gè) CSS 預(yù)處理器，完全兼容所有版本的 CSS。實(shí)際上，Sass 并沒(méi)有真正為 CSS 語(yǔ)言添加任何新功能。

在 Sass 中支持兩種類型的注釋：

// 注釋一

/* 注釋二 */

需要注意，當(dāng) Sass 編譯成CSS時(shí)，第一種注釋不會(huì)編譯到CSS中（只在Sass文件中可見(jiàn)），第二種注釋會(huì)編譯到CSS中。

變量：使用$符號(hào)定義變量，可以存儲(chǔ)值并在樣式表中重復(fù)使用。嵌套：通過(guò)嵌套這些代碼，可以得到類似HTML結(jié)構(gòu)的CSS代碼，使代碼更具可讀性（父子元素）。在編寫Sass時(shí)，要嵌套嵌套太深，盡量不要超過(guò)三層，超過(guò)之后就會(huì)導(dǎo)致代碼難以維護(hù)，并且在編譯為CSS時(shí)就會(huì)出現(xiàn)不必要的選擇器，就會(huì)導(dǎo)致CSS文件變大。在嵌套里，& 總是指向它上面的元素，可以用于偽類和偽元素?；旌希∕ixins）：類似于函數(shù)，可以創(chuàng)建一組可重用的樣式聲明。函數(shù)：SASS提供了一些內(nèi)置函數(shù)，也可以自定義函數(shù)來(lái)執(zhí)行計(jì)算或操作。繼承：可以使用@extend指令來(lái)擴(kuò)展一個(gè)選擇器的樣式到另一個(gè)選擇器。操作符：SASS支持各種操作符，可以進(jìn)行數(shù)值計(jì)算。條件語(yǔ)句和循環(huán)：SASS允許使用@if、@else和@for、@each、@while等控制指令。模塊化：Sass 支持使用 @import 導(dǎo)入其他 Sass (.scss)文件，可以將樣式表拆分成多個(gè)模塊，更方便地組織和管理樣式。

2. 繼承與嵌套：

在 Sass 中，雖然可以使用 @extend 來(lái)實(shí)現(xiàn)樣式的繼承，但繼承和嵌套是兩個(gè)不同的概念。嵌套主要用于層級(jí)結(jié)構(gòu)的表達(dá)和簡(jiǎn)化選擇器的書寫，而繼承則是通過(guò) @extend 關(guān)鍵字實(shí)現(xiàn)樣式規(guī)則（屬性和值）的復(fù)用。

.btn{

}

.zi-btn{

@extend .btn;

}

3. 混合Mixins：

允許開發(fā)者定義一組樣式規(guī)則，并在需要時(shí)將其包含（include）到其他選擇器中，類似于函數(shù)的概念。 定義混合： 使用 @mixin 關(guān)鍵字定義一個(gè)混合，并在其中包含一組 CSS 規(guī)則。

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

border-radius: $radius;

}

border-radius 是混合的名稱，$radius 是接受的參數(shù)。也可以帶默認(rèn)值：@mixin border-radius($radius:10px){}

包含混合： 使用 @include 關(guān)鍵字將混合包含到具體的選擇器或樣式中。

.box {

@include border-radius(10px);

background-color: #f0f0f0;

}

.box 類選擇器包含了 border-radius 混合，并傳入了參數(shù) 10px。

4.函數(shù)

在 Sass 中，函數(shù)是一種強(qiáng)大的工具，用于執(zhí)行各種操作和計(jì)算，包括顏色處理、數(shù)學(xué)運(yùn)算、字符串操作等。函數(shù)可以幫助開發(fā)者在樣式表中執(zhí)行復(fù)雜的邏輯和操作。

內(nèi)置函數(shù)： Sass 提供了一些內(nèi)置的函數(shù)，用于處理顏色、數(shù)學(xué)計(jì)算、字符串操作等常見(jiàn)任務(wù)。使用時(shí)直接傳參調(diào)用：width: ceil(10.5px);

顏色函數(shù)：lighten()、darken()、rgba() 等用于調(diào)整顏色的亮度和透明度。數(shù)學(xué)函數(shù)：round()、ceil()、floor() 等用于數(shù)值的四舍五入、向上取整、向下取整。字符串函數(shù)：str-length()、to-upper-case()、to-lower-case() 等用于處理字符串的長(zhǎng)度和大小寫轉(zhuǎn)換。

自定義函數(shù)： Sass 還支持自定義函數(shù)，允許開發(fā)者根據(jù)需要?jiǎng)?chuàng)建自己的函數(shù)來(lái)執(zhí)行特定的操作。自定義函數(shù)使用 @function 關(guān)鍵字定義，可以接受參數(shù)并返回一個(gè)值。

@function percentage($value, $total) {

@return ($value / $total) * 100%;

}

.container {

width: percentage(500px, 1000px); // 輸出 50%

}

5.操作符

在 Sass 中，操作符用于執(zhí)行各種數(shù)學(xué)和邏輯運(yùn)算，這些操作符與大多數(shù)編程語(yǔ)言中的操作符類似，但在 Sass 中還包括一些用于處理顏色和字符串的特殊操作符。 + - * / % == != > < >= <= and or not

6.模塊化

在一個(gè).scss文件中定義好了變量、mixins、函數(shù)等，可以在另一個(gè).scss文件使用。

@use 'scss1' as s1;/*引入并加別名*/

div {

@include s1.button-style(#3498db);/*mixins or 函數(shù)*/

@extend .btn;/*繼承*/

background-color: s1.$primary-color;/*變量*/

}

7.邏輯語(yǔ)句

Sass 提供了類似于編程語(yǔ)言的條件語(yǔ)句，包括 @if、@else if 和 @else，以及一些函數(shù)和操作符來(lái)幫助進(jìn)行條件判斷。

$color: green;

.button {

@if $color == red {

background-color: $color;

} @else if $color == green {

background-color: $color;

} @else {

background-color: black;

}

}

/*if()函數(shù)*/

.button {

background-color: if($color == red, $color, blue);

}

/*邏輯運(yùn)算符組合*/

$size: 10px;

$color: red;

.box {

@if $size > 5px and $color == red {

border: 1px solid black;

}

}

三、@規(guī)則

CSS 中的 @規(guī)則（At-rules）是一種特殊的語(yǔ)法結(jié)構(gòu)，以 @ 開頭，用于定義特定的樣式規(guī)則或指令，而不是直接應(yīng)用于 HTML 元素。這些規(guī)則通常用于引入外部資源、定義動(dòng)畫、媒體查詢、字體引入等特殊功能。

1.@import

@import 規(guī)則用于在 CSS 文件中引入其他 CSS 文件或資源。

@import url("styles.css");

2. @media

@media 規(guī)則用于根據(jù)不同的媒體類型和特定的條件來(lái)應(yīng)用樣式。

@media screen and (max-width: 600px) {

body {

font-size: 14px;

}

}

媒體查詢：指的是在 @media 規(guī)則中定義的條件部分，通常由媒體類型和一個(gè)或多個(gè)媒體特性組成。（Media Queries）是CSS3中引入的一種機(jī)制，允許開發(fā)者根據(jù)設(shè)備特性和環(huán)境條件來(lái)應(yīng)用不同的樣式規(guī)則。通過(guò)媒體查詢，可以檢測(cè)并響應(yīng)設(shè)備的特性，如屏幕寬度、高度、設(shè)備類型（打印設(shè)備、屏幕設(shè)備等）、視口寬度等，從而使得網(wǎng)頁(yè)可以在不同的設(shè)備和瀏覽器上提供最佳的用戶體驗(yàn)。

@media media_type and|not|only (media_feature) {

/* CSS 規(guī)則 */

}

media_type：媒體類型，例如 screen（屏幕）、print（打印機(jī)）、speech（語(yǔ)音合成器）等。media_feature：媒體特性，例如 width（寬度）、height（高度）、orientation（方向）、aspect-ratio（寬高比）等。

3. @font-face

@font-face 規(guī)則用于定義自定義字體，允許瀏覽器下載和使用 Web 字體。

@font-face {

font-family: "MyCustomFont";

src: url("myfont.woff2") format("woff2"),

url("myfont.woff") format("woff");

}

4. @keyframes

@keyframes 規(guī)則用于定義動(dòng)畫序列中的關(guān)鍵幀。允許定義動(dòng)畫過(guò)程中一系列關(guān)鍵幀的狀態(tài)。通過(guò)這些關(guān)鍵幀，可以創(chuàng)建復(fù)雜的動(dòng)畫效果，指定動(dòng)畫在不同時(shí)間點(diǎn)的樣式。

@keyframes color-change {

0% {

background-color: red;

}

50% {

background-color: yellow;

}

100% {

background-color: blue;

}

}

要應(yīng)用這個(gè)動(dòng)畫到一個(gè)元素上，需要使用 animation 屬性，如下所示：

div {

width: 100px;

height: 100px;

animation-name: color-change;

animation-duration: 4s;

animation-iteration-count: infinite;

}

這里將 color-change 動(dòng)畫應(yīng)用到了一個(gè) div 元素上。animation-duration 屬性定義了動(dòng)畫的持續(xù)時(shí)間，animation-iteration-count 屬性定義了動(dòng)畫的迭代次數(shù)（infinite 表示無(wú)限次）。

5. @supports

@supports 規(guī)則用于檢測(cè)瀏覽器是否支持某些 CSS 特性。

@supports (display: grid) {

.container {

display: grid;

grid-template-columns: 1fr 1fr;

}

}

6. @page

@page 規(guī)則用于定義打印文檔時(shí)的頁(yè)面樣式。與屏幕顯示的樣式不同，@page 規(guī)則允許控制打印頁(yè)面的布局和外觀，例如頁(yè)面大小、邊距、頁(yè)眉、頁(yè)腳等。

@page {

size: A4;

margin: 1cm;

}

7. @charset

@charset 規(guī)則用于指定 CSS 文件的字符集編碼。

@charset "UTF-8";

8. @namespace

@namespace 規(guī)則用于定義 XML 或 SVG 文檔中的命名空間。

@namespace url("http://www.w3.org/1999/xhtml");

8.@container

@container 允許開發(fā)者根據(jù)容器（而非視口或屏幕）的尺寸變化來(lái)設(shè)置內(nèi)部元素的樣式。這種機(jī)制被稱為“容器查詢”，它使得開發(fā)者能夠更精細(xì)地控制頁(yè)面布局，特別是當(dāng)頁(yè)面內(nèi)部元素的尺寸變化時(shí)。

基本用法：

首先，需要定義一個(gè)容器元素，例如

Goto國(guó)際即刻購(gòu)