Day20 CSS预处理器是什麽?

CSS preprocessor(预处理器）是什麽？

CSS 预处理器是个能透过使用预处理器语法，编译产生纯 CSS 的程序。
要使用 CSS 预处理器，必需安装 CSS 编译器，在开发环境透过 CSS 预处理器编译之後，上传编译好的 CSS 到服务器。

为什麽要用CSS预处理器?

CSS 预处理器有很多选择，预处理器有着许多原生CSS没有的功能，例如：mixin、变数、巢状选择器等，而这些功能可以使 CSS 结构的可读性更高且更容易维护。

受欢迎的 CSS 预处理器有哪些?

• Sass
• LESS
• Stylus

因为只用过Sass，所以就着重於整理关於使用Sass的学习笔记。

Sass/Scss简介

建立编译环境

1. 在VS Code上安装Live Sass Complier套件
   

2. 新增一个资料夹 命名为styles

3. 在styles资料夹内，新增一个档案，副档名.scss (如果用sass写，副档名会是.sass)
   

4. 试着在style.scss档案内写一些内容
   

5. 按一下下方watch sass
   

6. 按完watch sass 会跳出以下画面
   
   若编译错误，可以在这里查看是哪里写错

也会看到styles资料夹多出了两个档案

7. 点进去编译出的style.css档案看
   

会看到经过编译的styles.css写了一个看不懂的字-webkit
-webkit是浏览器内的网页排版引擎，负责用来处理HTML和CSS页面
会增加这个字的原因，是为了网页都能被任何浏览器所使用
参考资料:What is WebKit and how is it related to CSS?

html内的css载入连结会是编译好的css档案路径，不会是写scss档案

Sass 原理

将css都写在scss档案内，编译出一个css档案

图片来源:六角学院

Sass写法

有两种写法: scss 和sass

图片来源:六角学院

巢状式写法

使用sass的好处可以将css程序码写成巢状的结构
例如:
本来css的写法是

.header{
 width:50px;
 height:50px;
 background:#000;
}

.header ul{
 width:500px;
}

.header li{
 width:30px;
}

可以用SCSS方式写

.header{
 width:50px;
 height:50px;
 background:#000;
 ul{
   width:500px;
   li{
    height:30px;
    }
  }
 }

或是sass写法
用缩排的方式写(一个tab/两个空白)

.header
  width:50px;
  height:50px;
  background:#000;
  ul
    width:500px;
   li
     height:30px;

编译出来就会是

如果想把header名称改掉，只需要更动header这个字就好

变数的使用

使用变数能够减少重复写的属性样式，也方便维护程序码

变数名称前面会放一个$ 例如: $primarycolor: red;

经常使用到的颜色可以设定成变数
例如:

.header a{
color: #ff0000;
}
.content a{
color: #ff0000;
}
.footer a{
color: #ff0000;
}

可以将color: #ff0000;设定成变数$linkcolor: #ff0000;
这样设定当需要更改所有连结的颜色设定时，就只需要去更改变数的值，不用一个一个去改。

$linkcolor: #ff0000; 

.header a{
color: $linkcolor;
}
.content a{
color:$linkcolor;
}
.footer a{
color: $linkcolor;
}

编译出来的css会是

将变数改成其他颜色，原本写变数的地方也会跟着变动，非常方便

用 & 来新增伪类

例如:

.header{
  background-color:aqua; 
  h1{
    color: red;
  }
  &:hover{
    background-color: green; 
  }
 } 

编译出来会是

使用 @import 来拆分档案

可以新增好几个scss档案来管理

再用一个all.scss档案编译出css档案

图片来源:六角学院

SCSS结构参考

@import "variable";// 变数  
@import "reset";  // reset.css  
@import "layout"; // 共同框架,第一层
@import "index";     
@import "page1";     

Sass 7-1 Pattern

可以使用Sass 7-1 Pattern来区分Sass

• base
• components
• layout
• pages
• themes
• utils
• vendors
  以及主要引入的档案
  all.scss or main.scss

参考资料: 浅谈 CSS 设计模式系列-Sass 7-1 Pattern 篇
,Sass Guidelines

使用@mixin客制化常用的css样式

可以将常使用的css技巧做成@mixin，方便使用
例如:
将图片取代文字的技巧命名成 hide-text
在要使用的地方写 @include hide-text; 就可以套用上

@mixin可以搭配变数一起使用
例如:

参考资料: 前端中阶：CSS 预处理器,CSS preprocessor, 2021网页开发全攻略(HTML, CSS, JavaScript, React, SQL, Node, more), 六角学院-一变应万变的响应式网页设计

以上为个人学习笔记整理
若有错误，欢迎指正