在React中使用Sass實現Css樣式管理-10

0. 什么是Sass

Sass(Syntactically Awesome Stylesheets)是一個 CSS 預處理器，是 CSS 擴展語言，可以幫助我們減少 CSS 重復的代碼，節省開發時間：

Sass 引入合理的樣式復用機制，可以節約很多時間來重復。
支持變量和函數，利用代碼簡潔。

有兩種文件后綴名，.sass和.sccs區別在于前者用縮進代替了后者的{}和分號，建議用sccs后續來書寫sass代碼

sass，不使用大括號和分號。
scss，與css文件格式差不多，使用大括號和分號（推薦）。

在這里插入圖片描述

1. 在React中使用

正常使用

# 安裝cnpm install --save-dev sass# 新建文件
App.scss
.button{color:red
}# js中使用
import "./Index.scss";
<div className={color}></div>

模塊使用

# 安裝
npm install --save-dev css-loader style-loader# 新建文件
App.scss
.button{color:red
}# js中使用
import styles from './App.scss'
<div className={styles.button></div>

還需要配置webpack.config.js

{test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1,modules: {localIdentName: '[name]__[local]__[hash:base64:5]', // 修改CSS類名的生成格式},},},'postcss-loader', // 如果有其他的CSS預處理器，比如autoprefixer，可以在此添加],
}

這東西語法并不難，基本2小時就學會了。

2. 基本語法

基本數據

數字，1, 2, 13, 10px
字符串，有引號字符串與無引號字符串，“foo”, ‘bar’, baz
顏色，blue, #04a3f9, rgba(255,0,0,0.5)
布爾型，true, false
空值，null
數組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相當于 JavaScript 的 object，(key1: value1, key2: value2)

.item{width:100%;background:#ffffff;line-height:40px;
}

注釋

單行注釋： / / css文件里不會顯示壓縮方式的css不會顯示
多行注釋： /**/ css文件里會顯示壓縮方式的css不會顯示
強制注釋：/* ! */ css文件里會顯示壓縮方式的css會顯示

/*
多行注釋
*///單行注釋

運算

所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

數字：數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。關系運算 <, >, <=, >= 也可用于數字運算；

.box {width: 50px + 50px;height: 100px - 50px;margin-top: 10px * 10; // 這里不能兩個都帶單位，否則是100px*px這種不合法的值padding-top: (100px / 2) ;// css會將/認為是合法的，所以需要加括號
}

顏色：顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值。例如 #010203 + #040506，則計算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，結果為#050709；

.color1{color: #010120 + #234234;
}
.color2{color: #010120 * 2;
}
.color3{color: rgba(250, 0, 0, 0.75) + rgba(5, 255, 0, 0.75);
}

字符：有引號字符串（位于 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位于 + 左側）連接有引號字符串，運算結果則沒有引號。

.string1:before{font-family: icon + font ;content: "帶引號字符串" + 不帶引號字符串;
}
.string2:before{font-family: icon + font ;content: 不帶引號字符串 + "帶引號字符串";
}
// -------------生成的css代碼-------------
.string1:before {font-family: iconfont;content: "帶引號字符串不帶引號字符串"; 
}
.string2:before {font-family: iconfont;content: 不帶引號字符串帶引號字符串; 
}

布爾：支持布爾型的 and or 以及 not 運算。

.bool1:before{content: $bool and false;
}
.bool2:before{content: $bool or false;
}
.bool3:before{content: not $bool;
}// -------------生成的css代碼-------------
.bool1:before {content: false; }
.bool2:before {content: true; }
.bool3:before {content: false; }

嵌套.和&

選擇器嵌套

.grandpa {width: 200px;height: 200px;.father {width: 100px;height: 100px;}
}// -------------生成的css代碼-------------
.grandpa {width: 200px;height: 200px;
}

父級選擇器 &

.grandpa .father {width: 100px;height: 100px;
}.box {a {&:hover {color: red;}}
}
// -------------生成的css代碼-------------
.box a:hover {color: red;
}

上述這些用法和原生的.css文件基本沒啥區別

3. 復用相關

$和#變量定義

變量

$dark: #000;
$side: left;
.box {color: $dark;
}.box2 {background: $dark;border-#{$side}-radius: 5px;
}

插值

$selectName:'.foo';
$attrName:'width';
$content: "content內容";#{$selectName}:before {#{$attrName}:12px;content: "#{$content}";
}
// -------------生成的css代碼-------------
.foo:before {width: 12px;content: "content內容"; }

@function自定義函數

$width : 400;
$multiple: 2;
@function app_width($width,$multiple){@return $width * $multiple px;
}
#app{width: app_width($width,$multiple);
}// -------------生成的css代碼-------------
#app { width: 800 px; }

@mixin和@include復用

// 定義一個mixin
@mixin box-style {width: 200px;height: 200px;background: #000;
}
// 使用
.box {@include box-style;// 當然也可以繼續在這里添加樣式border-radius: 5px;
}// -------------生成的css代碼-------------
.box {width: 200px;height: 200px;background: #000;border-radius: 5px;
}

帶參數

$box-width: 200px;
$box-height: 200px;
// 定義一個mixin
@mixin box ($width, $height) {width: $width;height: $height;
}
// 使用
.box {// 1. 第一種用法, 直接將css樣式寫入@include box(200px, 200px);// 2. 第二種, 將定義好的變量寫入@include box($box-width, $box-height);
}// -------------生成的css代碼-------------
.box {width: 200px;height: 200px;
}

@extend繼承

支持多重繼承，同名則覆蓋

.error{color:red;
}
.success{color:green;
}
.msg{@extend .error;@extend .success;color: #555555;
}// -------------生成的css代碼-------------
.error, .msg {color: red; }.success, .msg {color: green; }.msg {color: #555555; }

@import引入文件

如果一個頁面需要使用其他頁面的樣式，sass可以導入其他的scss文件，scss會把他們編譯成一個css文件。這樣在開發中可以把一個頁面的樣式分割成多個scss文件，然后在頁面的scss文件中導入其他scss，可以實現css的模塊化開發。注意不能導入其它類型的文件或遠程文件。

//@import 語法
@import "test2.scss";
// 導入多文件
@import "test2.scss", "test3.scss";

4. 編程相關

@if @else條件語句

.box {@if 1+1 == 2 {color: red;} @else if 1+1 == 3 {color: blud;} @else {color: pink;}
}
// -------------生成的css代碼-------------
.box {color: red;
}

@for循環

@for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
}// -------------生成的css代碼-------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 {  width: 6em; }

@each迭代

$list : ['one','two'];
@each $i in $list {.item-#{$i}:before {content: $i;}
}// -------------生成的css代碼-------------
.item-one:before {content: "one"; 
}.item-two:before {content: "two"; 
}

@debug、@warn、@error調試

打印到標準錯誤輸出流。

debug

@debug 10em + 12em;

warn

@mixin adjust-location($x, $y) {@if unitless($x) {@warn "Assuming #{$x} to be in pixels";$x: 1px * $x;}@if unitless($y) {@warn "Assuming #{$y} to be in pixels";$y: 1px * $y;}position: relative; left: $x; top: $y;
}

error

@mixin adjust-location($x, $y) {@if unitless($x) {@error "$x may not be unitless, was #{$x}.";}@if unitless($y) {@error "$y may not be unitless, was #{$y}.";}position: relative; left: $x; top: $y;
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/17376.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/17376.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/17376.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！