🟡Sass学习

本文最后更新于:2022年4月8日 晚上

安装与使用SASS

安装Ruby

官网下载有devkteruby版本

安装时勾选自动添加环境变量

安装后命令窗口选3

命令终端使用ruby -v检查是否安装成功

gem更新

gem用于管理Ruby程序

命令终端执行以下命令

1
2
> gem update --system
> gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

gem -v命令检查是否更新成功

gem sources -l命令查看确保只有一个源

1
2
3
4
5
6
> gem -v

> gem sources -l

*** CURRENT SOURCES ***
https://gems.ruby-china.com/

安装SASS

命令终端执行以下命令安装sasscompass(编译后排版)

1
> gem install sass compass

执行以下命令确认安装成功

1
2
> sass -v
> compass -v

编译SASS

SCSS.scss:

1
2
3
4
5
6
* {
background: #787;
& > h1 {
color: #fff;
}
}

输入sass <scss文件名.scss> <css文件名.css>编译为css

1
> sass SASS.scss CSS.css

🥬编译格式

编译命令添加--style option来控制css文件的排版格式

1
> sass SASS.scss CSS.css --style [nested | expanded | compact | compressed]

🥬热加载

1
> sass --watch SASS.scss:CSS.css

SASS语法

注释

🥑行注释

1
// 行注释编译后不会保留

🥑块注释

1
2
3
/*
* 块注释编译后保留
*/

嵌套

🥕选择器嵌套

scss:

1
2
3
4
5
6
header {
background-color: #787;
p {
color: #666;
}
}

css:

1
2
3
4
5
6
header {
background-color: #787;
}
header p {
color: #666;
}

🥕父选择器

scss:

1
2
3
4
5
6
7
8
header {
p {
color: #666;
& > span {
color: #000;
}
}
}

css:

1
2
3
4
5
6
header p {
color: #666;
}
header p > span {
color: #000;
}

🥕属性嵌套

scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
header {
background: #787 {
image: './pic.jpg';
position: {
x: center;
y: center;
}
}
font: 2em {
family: 'Times New Roman';
weight: 500;
}
}

css:

1
2
3
4
5
6
7
8
9
header {
background: #787;
background-image: './pic.jpg';
background-position-x: center;
background-position-y: center;
font: 2em;
font-family: 'Times New Roman';
font-weight: 500;
}

变量

🍍命名

$key: value来声明变量

1
2
3
4
5
$bg-dark: #000;

body {
background-color: $bg-dark;
}
1
2
3
body {
background-color: #000;
}

🍍作用域

变量有块级作用域,使用!global声明全局变量

变量声明顺序为语句顺序,全局变量声明后才可用

1
2
3
4
5
6
7
8
9
10
11
12
13
$bg-dark: #000;
$font-dark: #fff;

body {
p {
$size: 2rem !global;
font-size: $size;
}
$font-dark: #eee;
background: $bg-dark;
color: $font-dark;
font-size: $size;
}
1
2
3
4
5
6
7
8
body {
background: #000;
color: #eee;
font-size: 2rem;
}
body p {
font-size: 2rem;
}

🍍变量类型

🍍变量运算


🟡Sass学习
https://qingshaner.com/sass学习/
作者
清山
发布于
2022年1月26日
许可协议