scss 入门基础
在一个项目中,样式是必不可少的一部分,而对于一个完整的项目来说是有个基准色调的。在项目需求变化不大的情况下,可以直接在css中写这些颜色值之类的东西。但是如果遇到一个朝令夕改的领导或者甲方,那会变得相当惨。
因此,在项目中使用预编译语言就显得很有效率,且简单。目前项目中就使用 scss 预编译语言。
首先区分一下:Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 这是中文官网。
1、变量
我们可以把基准色调 设置成变量,或者一些常用到的颜色。比如:
$bg_color: #ededed; // 背景色
$text_color: #333; // 文字颜色
$margin_bottom: 40upx; // 各个条目的下边距
2、使用变量
.content {
background-color: $bg_color;
flex-direction: column;
color: $text_color;
}
当基准色调改变,或者整体样式变化时,就不用一个一个去找,直接改变,变量的值,之后再重新编译就可以了。
3、嵌套规则
原来写法:
.content {
background-color: #ededed;
flex-direction: column;
} .content .list {
width: 400upx;
color: #ff0;
} .content .list image {
width: 60upx;
height: 60upx;
}
scss 嵌套规则写法:
.content {
background-color: $bg_color;
flex-direction: column; .list {
width: 400upx;
color: #ff0; image {
width: 60upx;
height: 60upx;
}
}
}
4、父选择器的标识符 &
可能主要是用于一些 伪类 选择器。看例子:
.content {
background-color: $bg_color;
flex-direction: column; .list { &:hover {
background-color: #ff0;
color: #fff;
} }
}
编译之后:
.content {
background-color: #ededed;
flex-direction: column;
} .content .list:hover {
background-color: #ff0;
color: #fff;
}
另一个例子:
.content {
background-color: $bg_color;
flex-direction: column; .list { a &:hover {
background-color: #ff0;
color: #fff;
} }
}
编译后:
.content {
background-color: #ededed;
flex-direction: column;
} a .content .list:hover {
background-color: #ff0;
color: #fff;
}
由此可以看出 & 代表的是父级的整体选择器。
5、群组选择器的嵌套,直接看代码
.content {
background-color: $bg_color;
flex-direction: column; .list { .name, .age, .sex {
margin-bottom: 40upx;
} }
}
编译后:
.content {
background-color: #ededed;
flex-direction: column;
} .content .list .name,
.content .list .age,
.content .list .sex {
margin-bottom: 40upx;
}
6、子组合选择器和同层组合选择器:>、+、~
.content {
background-color: $bg_color;
flex-direction: column; .list { ~ .name {
color: #ff0;
}
+ .age {
font-size: 40upx;
}
> .sex {
margin-bottom: 40upx;
} }
}
编译后:
.content {
background-color: #ededed;
flex-direction: column;
} .content .list~.name {
color: #ff0;
} .content .list+.age {
font-size: 40upx;
} .content .list>.sex {
margin-bottom: 40upx;
}
7、嵌套属性
.content {
background-color: $bg_color;
flex-direction: column; .list {
border: {
style: solid;
width: 2px;
color: #f00;
}
} .title {
border: 1px solid #4cd964 {
left: 2px;
bottom: 10px;
}
}
}
编译后:
.content {
background-color: #ededed;
flex-direction: column;
} .content .list {
border-style: solid;
border-width: 2px;
border-color: #f00;
} .content .title {
border: 1px solid #4cd964;
border-left: 2px;
border-bottom: 10px;
}
8、默认变量值 !default
$text_color: #333 !default;
这句的意思是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
这种一般用来处理,引入的 scss 文件 是否会有你生命的变量,如果有,则用引入的,如果没有,则使用默认的 #333;有点儿类似于 js 声明变量时候的兜底行为。
9、规则内引入 scss 文件
举例说明,有一个名为_blue-theme.scss
的局部文件,内容如下:
aside {
background: blue;
color: white;
}
引入文件:
.blue-theme {@import "blue-theme"}
编译后:
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
10、混合器 @mixin
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
使用:
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
编译后:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
混合器中不仅可以包含属性,还可以包含规则。
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
使用:
ul.plain {
color: #444;
@include no-bullets;
}
编译后:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
11、给混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
使用:
a {
@include link-colors(blue, red, green);
}
编译后:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
当你@include混合器时,有时候可能会很难区分每个参数是什么意思,参数之间是一个什么样的顺序。为了解决这个问题,scss
允许通过语法$name: value
的形式指定每个参数的值。这种形式的传参,参数顺序就不必再在乎了,只需要保证没有漏掉参数即可:
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
12、默认参数值
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
13、使用选择器继承 来精简css,使用:@extend
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
不只继承 .error 自己,和它相关的也继承
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
了解了这些就算是简单入门了,至少已经让你的css省时省力好多了,想要深入研究就多看官网吧。后面学习到再做总结。
scss 入门基础的更多相关文章
- 【转】Gulp入门基础教程
Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
- 01shell入门基础
01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...
- Markdown入门基础
// Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- C++ STL编程轻松入门基础
C++ STL编程轻松入门基础 1 初识STL:解答一些疑问 1.1 一个最关心的问题:什么是STL 1.2 追根溯源:STL的历史 1.3 千丝万缕的联系 1.4 STL的不同实现版本 2 牛刀小试 ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- Linux shell入门基础(六)
六.Shell脚本编程详解 将上述五部分的内容,串联起来,增加对Shell的了解 01.shell脚本 shell: # #perl #python #php #jsp 不同的脚本执行不同的文本,执行 ...
- Linux shell入门基础(一)
Linux shell入门基础(一): 01.增加删除用户: #useradd byf userdel byf(主目录未删除) userdel -r byf 该用户的属性:usermod 用 ...
随机推荐
- docker入门与部署微服务--学习笔记
最近公司进一步去windows,走向 linux+云化. 原来的一大坨windows虚拟机服务器都要转向linux, 既然走向linux的话,那么docker肯定是要涉足的. 故学习了docker入门 ...
- Anaconda--在虚拟环境中安装CUDA and cudnn
在conda虚拟环境中安装CUDAconda install cudatoolkit=8.0 -c https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs ...
- 服务器部署Laravel
安装lnmp环境 参考:简书 - Centos 7 下安装LNMP官方最新版 安装redis 参考:简书 - Centos 7下使用yum安装redis 安装nodejs npm nodejs分8.x ...
- 2019-11-25-win10-uwp-通过命令行脚本开启旁加载
原文:2019-11-25-win10-uwp-通过命令行脚本开启旁加载 title author date CreateTime categories win10 uwp 通过命令行脚本开启旁加载 ...
- abstract,virtual,override个人
1.abstract 可以修饰类和方法,修饰方法时只声明不实现: 2.继承实现abstract类必须通过override实现abstract声明的方法,而virtual方法可选择override(重写 ...
- C# 练习题 打印出100-999之间所有的”水仙花数”
题目:打印出100-999之间所有的”水仙花数”,所谓”水仙花数”是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个”水仙花数”,因为153=1的三次方+5的三次方+3的三次方.1.程序 ...
- windows7系统 执行应用程序报 Error accessing specified device (Error: 2)
--------------------------- ---------------------------Error accessing specified device (Error: 2) - ...
- Laravel向表里插入字段
执行: php artisan make:migration add_字段_to_表名_table --table=表名 此时在database/migrations文件夹下会生成一个相应文件,更改如 ...
- Docker 网络简单说明
docker0 网络模型小结 Docker Daemon 会创建出一个名为 docker0 的虚拟网桥 ,用来连接宿主机与容器,或者连接不同的容器. veth pair 是用于不同network na ...
- Ubuntu 18.04通过命令禁用/开启触控板
Ubuntu下经常遇到无法用快捷键关闭触控板的情况,博主的电脑安装Ubuntu18.04后便出现了该问题. 解决办法: 首先查看输入设备的id,命令行输入: xinput ,插鼠标与不插鼠标时,Tou ...