中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
Sass 是一個 CSS 預處理器，完全兼容所有版本的 CSS。實際上，Sass 并沒有真正為 CSS 語言添加任何新功能，只是在許多情況下可以可以幫助我們減少 CSS 重復的代碼，節省開發時間。下面就來看看 Sass 中常用的功能吧！
在 Sass 中支持兩種類型的注釋：
// 注釋一/* 注釋二 */需要注意，當 Sass 編譯成CSS時，第一種注釋不會編譯到CSS中（只在Sass文件中可見），第二種注釋會編譯到CSS中。
嵌套的寫法是Sass的一大特點，通過嵌套這些代碼，可以得到類似HTML結構的CSS代碼，使代碼更具可讀性。
nav { background : #C39BD3; padding : 10px; height: 50px; ul { display: flex; list-style : none; justify-content: flex-end; li { color: white; margin-right: 10px; } }}那為什么要使用嵌套呢？在CSS中，如果想為其父元素的繼承元素定義樣式，就必須每次都選擇父元素：
html, body { height: 100%;}html #root, body #root { height: 100%;}html .div-with-button, body .div-with-button { background-color: black;}html .div-with-button button, body .div-with-button button { background-color: #e4c681;}html .div-with-button button:hover, body .div-with-button button:hover { background-color: #ffe082;}在Sass中就可以這樣寫，這樣寫就會使代碼更加清晰、條理和簡潔：
html, body { height: 100%; #root { height: 100%; } .div-with-button { background-color: black; button { background-color: #e4c681; &:hover { background-color: #ffe082; } } }}注意，在編寫Sass時，要嵌套嵌套太深，盡量不要超過三層，超過之后就會導致代碼難以維護，并且在編譯為CSS時就會出現不必要的選擇器，就會導致CSS文件變大。
我們還可以在嵌套中使用 &，比如鼠標在按鈕上懸浮時，改變顏色。在CSS中是這樣的：
button { background-color: #535353; color: #000;}button:hover { background-color: #000; color: #fff;}在Sass中就可以這么寫：
button { background-color: #535353; color: #000; &:hover { background-color: #000; color: #fff; }}通常，& 總是指向它上面的元素，可以用于偽類和偽元素：
.box { &:focus{} &:hover{} &:active{} &:first-child{} &:nth-child(2){} &::after{} &::before{} }編譯后的CSS代碼如下：
.box:focus{} .box:hover{}.box:active{}.box:frist-child{}.box:nth-child(2){}.box::after{}.box::before{}此外，如果類以相同的詞開頭（比如box-yellow和box-red），就可以嵌套它們：
.box { &-yellow { background: #ff6347; } &-red { background: #ffd700; } &-green { background: #9acd32; }}編譯成CSS就是這樣的：
.box-yellow { background: #ff6347;}.box-red { background: #ffd700;}.box-green { background: #9acd32;}Sass還支持使用:來嵌套屬性：
add-icon { background : { image: url("./assets/arrow-right-solid.svg"); position: center center; repeat: no-repeat; size: 14px 14px; }}上面的代碼編譯為如下CSS：
.add-icon { background-image: url("./assets/arrow-right-solid.svg"); background-position: center center; background-repeat: no-repeat; background-size: 14px 14px;}變量是用來儲存數據的，在Sass中，我們可以將任何有效的CSS值保存在變量中。變量使用$符號定義：
$red: #ee4444;$black: #222;$bg-color: #3e5e9e;$link-color: red;$p-color: #282A36;$font-p: 13px;$font-h1: 28px;$base-font: 'Noto Sans KR', sans-serif;變量的使用：
body { background-color : $bg-color; font-size : $font-p; font-family : $base-font;}h1 { font-size: $font-h1; color: $black;}p { font-size: $font-p; color: $black;}a { color: $link-color;}當Sass編譯成CSS時，所有的變量都會被替換為定義的變量值。變量可以減少重復、進行復雜的數學運算等。
需要注意，CSS變量是有范圍的，位于頂層的變量都是全局變量，在塊中定義的變量都是局部變量。全局變量可以在任何地方使用，局部變量只能在變量定義的塊中使用。
$my-global-variable: "global";div { $my-local-variables: "local";}變量值是可以覆蓋的：
$color: #fefefe;.content { background-color: $color;}$color: #939393;.footer { background-color: $color;}在上面的代碼中，content的背景顏色是#fefefe，而footer的背景顏色是#939393。要想改變全局變量，就需要添加!global修飾符：
$color: #111;.content { $color: #222; background-color: $color;}.footer { $color: #333 !global;}除此之外，Sass變量是可以指定默認值的：
$message-color: blue !default;.message { color: $message-color;}編譯成的CSS代碼如下：
.message { color: blue;}我們可以在 @import 之前覆蓋模塊默認值：
$message-color: black;@import 'my-module';.message { color: $message-color;}編譯成的CSS代碼如下：
p.message { color: black;}也就是說，帶有 !default 的變量只有在沒有值的情況下才會生效。
mixin 是一組可以重用的 CSS 聲明，語法類似于JavaScript中的函數，使用 @mixin 指令來代替 function 關鍵字。調用 mixin 是通過 @include 語句完成的。
以下是用 mixins 使元素水平垂直居中的方法：
@mixin absolute-center() { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}.element { @include absolute-center();}當然，mixin也是支持傳遞參數的：
@mixin square($size) { width:$size; height:$size;}div { @include square(60px); background-color:#000;}參數可以是可選的，可選參數的定義和Sass變量的定義形式是一樣的：
@mixin square($width: 50px) { width:$size; height:$size;}我們還可以將 CSS 規則傳遞給 mixins。這些規則可以在使用 @content 的 mixin 中使用。
@mixin hover-not-disabled { &:not([disabled]):hover { @content; }}.button { border: 1px solid black; @include hover-not-disabled { border-color: blue; }}這樣mixin中的@content在編譯后就會變成border-color: blue;這樣寫有助于減少&:not([disabled]):hover部分的重復。
在CSS中我們通常會創建多個CSS文件并在需要時引入：
<link rel="stylesheet" href="/path/to/css/1"></link><link rel="stylesheet" href="/path/to/css/2"></link> <link rel="stylesheet" href="/path/to/css/3"></link>這樣做會使瀏覽器發出多個HTTP請求，從而在一定程度上降低應用的速度。而Sass會在代碼發動到瀏覽器之前進行代碼組合，這樣只需要請求一個CSS文件。
下面來看看如何使用 @import 將文件分塊并導入到一個父文件中：
body { padding:0; margin:0;}body, html { width:100%; min-height:100%;}@import 'normalize';content { max-width:660px;}假設 normalize.scss 和 styles.scss 都在同一個文件夾中，可以將一個導入另一個，如上所示。在使用@import時，所有變量、mixin 等都可以全局訪問，因為一切都是全局的，所以庫必須為其所有成員添加前綴以避免命名沖突。因此不建議使用 @import。
可以使用 @use 來代替，它的基本用法與@import 相同：
@use 'normalize';content { max-width:660px;}使用 @use 導入的文件稱為模塊。要使用這些模塊的 mixin 或變量，必須使用命名空間來調用它們。默認情況下，命名空間是文件名（不帶擴展名）。
$accent-color: #535353;@mixin dark-background { background-color:#000; color:#fff;}@use 'src/colors';body { color: colors.$accent-color;}.dark-region { @include colors.dark-background;}還可以使用 as 來使用自定義命名空間：
@use 'src/colors' as c;body { color: c.$accent-color;}當 _ 被添加到 SCSS 文件的文件名前時，解析器知道它是一個部分文件并且它僅用于導入。導入時，_ 部分是可選的。注意，這里使用 src/colors 來導入 src/_colors.scss。
在CSS中可以使用calc()進行數學計算，Sass 支持直接使用+、-、/、*、% 操作符對值和變量進行計算：
$content-width: 600px;content { width:$content-width;}.inner-content { width: $content-width - 60px; }.outer-content { width: $content-width + 60px;}在 Sass 中有四種類型的流程控制規則：@if /@else、@each、@for 和@while。其中 @if 和 @else 類似于 JavaScript 中的 if 和 else。
@mixin theme($is-dark: false) { @if $is-dark { } @else { }}@each 類似于 JavaScript 中的 for of：
$sizes: 40px, 50px, 80px;@each $size in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; }}注意：#{$size} 表示法用于使用變量制作動態屬性名稱和選擇器，這稱為插值。
@for 類似于 JavaScript 中的 for 循環：
@for $i from 1 through 4 { .bubble-#{$i} { transition-delay: .3 * $i; }}@while（不常用）類似于 JavaScript 中的 while 循環。
有時需要編寫一個僅用于擴展的樣式規則。在這種情況下，可以使用占位符選擇器，它看起來像以 % 而不是 . 開頭的類選擇器。
%flex { display: flex;}.some-class { height: 50%; background-color: black;}%flex_with_color { @extend %flex; @extend .some-class;}%button_styles { height: 50px; width: 200px;}div { @extend %flex_with_color; button { @extend %button_styles; color: #424242; background-color: #d966fb; }}上面的代碼編譯成CSS之后將是這樣的：
div { display: flex;}.some-class, div { height: 50%; background-color: black;}div button { height: 50px; width: 200px;}div button { color: #424242; background-color: #d966fb;}在Sass中可以這樣來使用媒體查詢：
body { article { p { font-size: 100%; color: black; padding: 10px; @media (max-width: 768px) { font-size: 150%; } } }}編譯成的CSS代碼如下：
body article p { font-size: 100%; color: black; padding: 10px;}@media (max-width: 768px) { body article p { font-size: 150%; }}媒體查詢是支持嵌套的，并將所有適用的查詢與 and 運算符結合起來：
p { @media (max-width: 768px) { font-size: 150%; @media (orientation: landscape) { line-height: 75%; } }}編譯成的CSS代碼如下：
@media (max-width: 768px) { p { font-size: 150%; }}@media (max-width: 768px) and (orientation: landscape) { p { line-height: 75%; }}本文鏈接：http://m.www897cc.com/showinfo-26-84905-0.htmlSass 完全指南，一起來看看 Sass 中常用的功能吧！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號