初学Sass

简介: 初学Sass

本周主要学习了Sass的内容,再次让我获益匪浅,Sass 是一个css预处理器,可以帮助我们减少css中重复的代码,以下是我所整理的Sass的部分知识。

Sass文件的后缀名为

.scss

Sass变量使用$符号

$variablename:value;

Sass嵌套规则与属性`

Sass代码

nav{
  ul{
  margin: 0;
  padding: 0;
  list-style:none;
  }
}

转换为css代码

nav ul{
  margin: 0;
  padding: 0;
  list-style:none;
}

Sass嵌套属性

很多css属性有同样的前缀,例如:background-color,background-image,background-size,因此我们可以使用嵌套属性来编写

background: {
  color:red;
  image:url();
  size: 100%;
}

转换为css代码为

background-color:red;
  background-image:url();
  background-size:100%;

@import

导入文件,格式为:@import 文件名

若希望导入的文件不被翻译,则文件名的开头加一个下划线,但在导入的时候不需要下划线

@mixin与@include

5ab78b29478e473e8f3589c6fdf3da4e.png

@extend与继承

将写好的属性继承到某一个元素中

bc482e625b504716a00f1d2df99f0fac.png

@each指令

d1ee7de99cc047c7aa31822b5169e964.png

list为一个表达式,$var为list里面遍历的值

@while指令

@while 条件表达式

知道表达式的值为fals停止循环,和@for指令相似,只要@while后面的条件为true就会执行

@for指令

1.从start开始循环,到end结束;

653e0777688746048f6dcc7def7b2e6b.png

2.从start开始循环,碰到end值则结束;

fa2f6f65dfa146e98bc146ec36422f93.png

本周已经结束,希望在接下来的学习中能够在学习到新东西时并及时温习前面学习的内容


目录
相关文章
|
7月前
|
XML 前端开发 数据格式
探索CSS预处理器:Sass、Less与Stylus
探索CSS预处理器:Sass、Less与Stylus
|
6月前
|
人工智能 前端开发 JavaScript
前端Sass详解说明
前端Sass详解说明
|
7月前
|
前端开发 开发者
stylus、sass、less区别, Sass 、LESS是什么
【4月更文挑战第1天】stylus、sass、less区别, Sass 、LESS是什么
92 0
|
7月前
|
前端开发 开发者 Ruby
Sass、LESS区别是什么?大家为什么要使用他们?
Sass(Syntactically Awesome Style Sheets)和LESS(Leaner CSS)是两种流行的CSS预处理器,它们在原生CSS的基础上提供了一些额外的功能和语法。
212 1
|
7月前
|
Web App开发 前端开发 iOS开发
Sass 安装
Sass 安装
58 0
|
前端开发 Shell 开发工具
sass/scss 入门
sass/scss 入门
79 0
|
iOS开发
|
前端开发 JavaScript
Vue 安装 CSS 预处理器(Less、Sass、Stylus)
Vue 安装 CSS 预处理器(Less、Sass、Stylus)
244 0
|
前端开发
sass学习笔记(下)
sass学习笔记
87 0
|
前端开发 JavaScript
sass学习笔记(上)
sass学习笔记
243 0