262 lines
4.8 KiB
Markdown
262 lines
4.8 KiB
Markdown
---
|
||
title: SASS - 语法(1)
|
||
date: 2018-5-12 22:38:32
|
||
tags:
|
||
- 前端
|
||
- sass
|
||
categories:
|
||
- 前端杂烩
|
||
---
|
||
|
||
### 变量
|
||
在scss当中定义变量的语法如下
|
||
<pre>
|
||
$变量名 : 变量值;
|
||
</pre>
|
||
代码块外部定义的变量可以在全局范围内使用
|
||
<!-- more -->
|
||
在代码块内部定义的变量是局部变量
|
||
例如
|
||
```scss
|
||
.box {
|
||
$color:red;
|
||
a{
|
||
color:$color;
|
||
}
|
||
}
|
||
```
|
||
如果该变量的值需要嵌入到字符串当中 , 需要加`#{ }`
|
||
```scss
|
||
$side : left;
|
||
.box {
|
||
border-#{$side}-radius:5px;
|
||
}
|
||
```
|
||
#### 默认变量
|
||
sass的默认变量一般用来设置默认值 , 然后根据需求来进行覆盖
|
||
例如
|
||
```scss
|
||
$a_padding : 20px !default;
|
||
$a_padding : 6px;
|
||
```
|
||
如果对默认变量的值进行了覆盖 , 那么实际输出的就是覆盖之后的值 , 否则输出的就是默认值
|
||
|
||
如果是在一个单文件当中 , 并没有必要这样做
|
||
默认变量在`组件化开发`的时候会非常有用
|
||
|
||
> 什么时候需要声明变量
|
||
> + 该值至少重复出现了两次
|
||
> + 该值至少可能会被更新一次
|
||
> + 该值所有的表现都与变量有关
|
||
|
||
### 嵌套
|
||
|
||
使用嵌套的方式来编写css代码 , 可以使元素之间的层级关系更清晰 , 代码的可读性更强
|
||
|
||
#### 选择器嵌套
|
||
```scss
|
||
div {
|
||
h1 {
|
||
color :red;
|
||
}
|
||
}
|
||
```
|
||
编译后的结果为
|
||
```
|
||
div h1 {
|
||
color : red;
|
||
}
|
||
```
|
||
前面如果加上 `>`可以作为父子选择器
|
||
|
||
在嵌套的代码块内 , 可以使用`&`引用父元素
|
||
比如
|
||
```scss
|
||
a {
|
||
&:hover{color:red;}
|
||
&:visited{color:gray;}
|
||
}
|
||
```
|
||
#### 属性嵌套
|
||
有一些复合属性可以使用嵌套的方式来写
|
||
比如border
|
||
```scss
|
||
p {
|
||
border : {
|
||
color:red;
|
||
width:2px;
|
||
}
|
||
}
|
||
```
|
||
**注意** : border的后面必须要加上冒号
|
||
|
||
### 注释
|
||
SCSS可以有两种风格的注释
|
||
一种是标准的css注释 `/* */`
|
||
编译会保留
|
||
另一种是单行注释 `//` , 编译过程不保留
|
||
|
||
### Mixin
|
||
|
||
Mixin有点像C语言的宏定义 , 是可以重用的代码块
|
||
```scss
|
||
//使用@mixin命令,定义一个代码块
|
||
@mixin left {
|
||
float : left;
|
||
margin-left : 10px;
|
||
}
|
||
//使用@include调用这个mixin
|
||
.box {
|
||
@include left;
|
||
}
|
||
```
|
||
mixin的强大之处 , 在于可以去指定参数和缺省值
|
||
```scss
|
||
@mixin left($value:10px) {
|
||
float : left;
|
||
margin-left : $value;
|
||
}
|
||
.box {
|
||
@include left(20px);
|
||
}
|
||
```
|
||
如果引入的时候不传参数 , 则使用缺省值
|
||
实例 : 生成浏览器前缀
|
||
```scss
|
||
@mixin rounded($vert, $horz, $radius: 10px) {
|
||
border-#{$vert}-#{$horz}-radius: $radius;
|
||
-moz-border-radius-#{$vert}#{$horz}: $radius;
|
||
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
|
||
}
|
||
|
||
#navbar li {
|
||
@include rounded(top,left);
|
||
}
|
||
#footer {
|
||
@include rounded(top,left,5px);
|
||
}
|
||
```
|
||
|
||
### 颜色函数
|
||
颜色函数是基于某个颜色进行的色彩调整
|
||
利用这些函数 , 可以很方便完成界面上风格统一的色彩搭配
|
||
涉及色彩的部分 , 可以很方便修改 , 完成主题风格的切换
|
||
```scss
|
||
$base_color : chocolate;
|
||
|
||
@mixin size {
|
||
width:200px;
|
||
height:100px;
|
||
}
|
||
|
||
.div1 {
|
||
@include size;
|
||
background:{
|
||
color: darken($base_color, 10%);
|
||
}
|
||
}
|
||
.div2 {
|
||
@include size;
|
||
background:{
|
||
color: $base_color;
|
||
}
|
||
}
|
||
.div3 {
|
||
@include size;
|
||
background:{
|
||
color: lighten($base_color, 10%);
|
||
}
|
||
}
|
||
```
|
||
效果图
|
||
|
||
|
||
常用的颜色函数
|
||
+ `darken` , `lighten` - 调整亮度 , 变暗/变亮
|
||
+ `sturate` , `desaturate` - 增加/减小 饱和度
|
||
+ `adjust-hue` - 调整 色相
|
||
+ `grayscale` - 灰度处理
|
||
+ `complement` - 色彩反相
|
||
|
||
### 文件引入
|
||
使用`@import` 引入另一个样式文件 , 可以是scss文件 , 也可以是css文件
|
||
```scss
|
||
@import "path/filename.scss"
|
||
@import "path/base.css"
|
||
```
|
||
|
||
### 继承
|
||
SASS允许一个选择器 , 继承另一个选择器
|
||
```scss
|
||
.class1 {
|
||
border : 1px solid #ddd;
|
||
}
|
||
.class2 {
|
||
@extend .class1;
|
||
font-size : 120%;
|
||
}
|
||
```
|
||
在编译过后 , 会生成
|
||
```css
|
||
.class1, .class2 {
|
||
border : 1px solid #ddd;
|
||
}
|
||
.class2 {
|
||
font-size:120%;
|
||
}
|
||
```
|
||
相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率
|
||
|
||
### 流程控制
|
||
#### 条件语句
|
||
使用`@if`和`@else`可以进行判断
|
||
```scss
|
||
@if lightness($color) > 30% {
|
||
background-color: #000;
|
||
} @else {
|
||
background-color: #fff;
|
||
}
|
||
```
|
||
#### 循环语句
|
||
for循环
|
||
```scss
|
||
@for $i from 1 to 10 {
|
||
.border-#{$i} {
|
||
border: #{$i}px solid blue;
|
||
}
|
||
}
|
||
```
|
||
while循环
|
||
```scss
|
||
$i: 6;
|
||
@while $i > 0 {
|
||
.item-#{$i} { width: 2em * $i; }
|
||
$i: $i - 2;
|
||
}
|
||
```
|
||
each循环 , 类似于迭代器
|
||
```scss
|
||
@each $member in a, b, c, d {
|
||
.#{$member} {
|
||
background-image: url("/image/#{$member}.jpg");
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
### 自定义函数
|
||
|
||
使用`@function`可以自定义一个函数
|
||
```scss
|
||
@function double($n) {
|
||
@return $n * 2;
|
||
}
|
||
#sidebar {
|
||
width : double(5px);
|
||
}
|
||
```
|
||
|
||
附 : 知识结构梳理
|
||
|
||
|