寫在前面
在實際專案開發中，我們已經漸漸的不去使用原始的css,反而使用較為方便的前處理器sass，less，也就是下文我們們即將要提到的。既然是前端開發者不得不掌握的一門技術：寫樣式，即使現在是工程化 模組化 開發，不過我們逃不開的還是最基礎的樣式
我們知道常見的css前處理器 有三種：
- sass
- less
- stylus
這是一個系列篇
初識
或多或少我們都知道sass很便捷，支援巢狀的語法
body {
background-color: pink;
ul {
li {
font-size: 20px;
}
}
}
複製程式碼body {
background-color: pink;
}
body ul li {
font-size: 20px;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼核心用法
- 變數
- 巢狀
- 混合
- 函式
準備工作
安裝
對於前端開發者來說,可以直接在node環境安裝
npm install -g sass
sass --version // 1.26.2 compiled with dart2js 2.7.1
複製程式碼在基於node 的環境下，直接全域性安裝就可以使用，當然在windows以及mac 平臺上又有一些差異，這裡可以查閱官網
sass 英文官方網站
安裝完成
編譯
將style檔案下的sass轉為style下的css
sass --watch style/sass:style/css
複製程式碼├─demo.html
├─README.md
├─style
| ├─sass
| | ├─demo.scss
| | └_base.scss
| ├─css
| | ├─demo.css
| | └demo.css.map
複製程式碼詳細用法
變數
- 目的 ：為了能夠在樣式表中方便的訪問
- 使用：儲存顏色、字型
以$開頭
$my-color: #fff;
$my-border: 1px solid $my-color;
.box {
background-color: $my-color;
}
h1 {
border: $my-border;
}
複製程式碼.box {
background-color: #fff;
}
h1 {
border: 1px solid #fff;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼插值變數
$class: ".div" #{$class} {
width: 200px;
}
複製程式碼巢狀
- 目的：便於維護、層次分明、視覺化
- 使用：直接一層一層的巢狀
li {
a {
display: block;
&:hover {
background-color: pink;
}
}
& &-text {
font-size: 20px;
}
}
複製程式碼li a {
display: block;
}
li a:hover {
background-color: pink;
}
li li-text {
font-size: 20px;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼body {
font: {
family: Arial, Helvetica, sans-serif;
size: large;
weight: bold;
}
border: 1px solid red {
radius: 20px;
top: 20px;
}
}
複製程式碼body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
border: 1px solid red;
border-radius: 20px;
border-top: 20px;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼mixins 混合
基本使用
// 定義混入
@mixin mixinName {
color: red;
background-color: pink;
a {
color: green;
}
}
// 使用混入
div {
@include mixinName();
}
複製程式碼div {
color: red;
background-color: pink;
}
div a {
color: green;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼帶引數
@mixin myMixin($text-color, $bgc) {
color: $text-color;
background-color: $bgc;
}
.box {
@include myMixin(#fff, red);
}
.box2 {
@include myMixin($bgc: #fff, $text-color: pink);
}
複製程式碼.box {
color: #fff;
background-color: red;
}
.box2 {
color: pink;
background-color: #fff;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼繼承
.type {
margin: 10px;
}
.type a {
font-weight: bold;
}
.type-info {
@extend .type;
font-size: 20px;
}
複製程式碼.type,
.type-info {
margin: 10px;
}
.type a,
.type-info a {
font-weight: bold;
}
.type-info {
font-size: 20px;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼partials 和 @import
@import "base";
div {
background-color: pink;
}
複製程式碼註釋
// 單行註釋
/*註釋
*多行註釋*/
複製程式碼@charset "UTF-8";
/*註釋
*多行註釋*/
/*# sourceMappingURL=demo.css.map */
複製程式碼型別
PS E:\gh-code\every-day-up\sass-less\style> sass -i
>> type-of(`yayxs`)
^
Error: expected ")".
>> type-of(12)
number
>> type-of(hello)
string
>> type-of(1px solid)
list
>> type-of(#fff)
color
>> type-of(red)
color
>>
複製程式碼
>> (10 /2)
5
>> (10px+10px)
20px
>> 2px * 2px
4px*px
>> (4px/2px)
2
>>
複製程式碼>> abs(-10)
10
>> round(2.2)
2
>> ceil(2.3)
3
>> floor(3.6)
3
>> min(1,2,3)
min(1, 2, 3)
>> max(100,99,98)
max(100, 99, 98)
>>
複製程式碼string
>> to-lower-case('YAYXS')
"yayxs"
>> str-length('yayxs')
5
>> str-index("yayxs",yx)
3
>> str-insert("yayxs","nice",2)
"yniceayxs"
>>
複製程式碼顏色函式
body {
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);
background-color: hsl(100%, 0, 0);
background-color: hsla(100%, 0, 0, 0.5);
}
複製程式碼adjust-hue
$base-color: #ff0000;
body {
background-color: adjust-hue($base-color, 138deg);
}
複製程式碼body {
background-color: #00ff4d;
}
/*# sourceMappingURL=demo.css.map */
複製程式碼lighten
$light-color: lighten($base-color, 30%);
$dark-color: darken($base-color, 30%);
$saturate-color: saturate($base-color, 50%);
複製程式碼列表
>> length(1px solid red)
3
>> nth(5px 10px,2)
10px
>> index(1px 2px,1px)
1
>> append(1px 2px,3px)
1px 2px 3px
>>
複製程式碼