文档章节

sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

Stinson_Zhao
 Stinson_Zhao
发布于 2016/12/02 19:11
字数 1904
阅读 170
收藏 3
点赞 0
评论 0

这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。

零. 变量

变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后无忧。

1.变量声明

变量用"$"符号开头进行声明,任何可以用作CSS属性值的东西都可以用作sass变量的值,单个值、空格分开的多个值、逗号分开的多个值都可以:

$primary-color: #233;
$general-border: 1px solid #ddd;

变量一般声明在sass源代码的开头处,CSS规则块外(花括号外面),便于寻找和维护,不过有时候你也想将变量声明在规则块内,这也是没有问题的,只是这样就只能在块内使用,类似“块作用域”。

2.变量使用

凡是CSS属性的标准值可存在的地方,变量都可以使用,而且变量可以被引用在另一个变量的声明中:

$primary-color: #233;
$general-border: 1px solid $primary-color;

可能还见到过形如#{$val}这样去用变量的,用#{}包裹,这其实是把变量看成一个表达式在用,这样的用法叫插值,这个在sass高级特性中再述。

一. 嵌套——层次

嵌套规则就像洋葱,一层一层,很有层次感,即可读性和条理性。最常见的选择器嵌套,就是一层层打开,一般被包含选择器作为包含选择器的后代选择器展开:

/*sass*/
li{
	float:left;
	a{
		color: #c33;
	}
}
/*生成的css*/
li{
	float:left;
}
li a{
	color:#c33;
}

1. 父选择器标识符&

父选择器标识符&可以放在任何一个选择器可以出现的地方,代表的就是字面意思——父选择器,为什么要有这个东西呢?因为不想无脑化被当做后代展开,最常见的比如当嵌套伪类选择器时:

li{
	float:left;
	a{
		color: #233;
		&:hover{
			color:#c33;
		}
	}
}
/*这样生成的CSS是这样的*/
li{
	float:left;
}
li a{
	color:#233;
}
/*注意这里的a选择器和伪类选择器间没有空格,&被父选择器直接替换*/
li a:hover{
	color:#c33
}

当包含父选择器标识符的嵌套规则打开时,不会简单当做后代选择器拼接,而是&被父选择器直接替换。

伪类是一种常用用法,当然这个“飙师傅”——&——也可以放在选择器后面(记得遇到&打开时不是被正常拼接,可以替换):

#content aside{
	color:red;
	body.ie & { color:green }
}
/*输出的css是这样的*/
#content aside{
	color:red;
}
body.ie #content aside { color:green }

2. 复杂选择器嵌套

  • 群组选择器,如h1,h2,h3{ a{...} }或者div{ h1,h2,h3{...} },sass会正确处理,分别打开组合h1 a, h2 a, h3 a{...}div h1, div h2, div h3{...}
  • 子组合选择器和同层选择器:>+~ ,sass都会正确处理,不管它们是在选择器前还是后

3. 属性嵌套

写背景样式时写一堆background-XX很烦吧,属性嵌套可以帮你减少一些工作量。把属性名从中划线的地方断开,在根属性后边添加一个冒号,紧跟一个花括号块,把子属性写在花括号中:

div{
	background:{
		image: url(./img/233.png);
		repeat: no-repeat;
		size: contain;
	}
}

二. 导入——@import

Sass的@import和CSS的不一样。CSS的@import,只有在执行到的时候才去下载其他CSS文件,这就影响了页面加载;而Sass的@import在生成CSS文件的时候就把相关文件导入进来了。

1.sass的@import语法

Sass的@import并不需要指明被导入文件的全名,即可以省略.sass或者.scss扩展名。

此外,每个sass文件一般会被输出成CSS文件,但其实当我们用@import引入sass文件时,我们仅仅希望生成一个总体的css文件,不需要每个sass文件都被输出成css,这样的文件被称作"sass局部文件",即不会被单独编译输出成css,用来被引入。

Sass局部文件需要以下划线开头,当用@import引入时,不仅可以省略扩展后缀,也可以省略开头的下划线。

所以,假设我们有一个"_nav.scss"和一个"article.scss"需要引入,那么我们仅仅这么写就够了:

@import "nav"
@import "article"

而且,sass的@import命令可以写在CSS规则内,这会使生成的CSS规则直接被插入到导入的地方。你可以把@import命令看做一个宏,写在哪里,那里就被要导入的sass文件源代码替换。

2. 导入后可定制

导入机制能让你的sass根据某种依据分成几个板块(如根据不同的区域),那么导入某个sass文件,这个文件完全决定了这部分的样式,如颜色、字体、字号等。

而你想让导入后,还能修改一些值以定制自己需要的样式,比如颜色、大小等,尤其是当小明想导入你的sass文件时,可能被导入的样式设置不能很好满足他自己的需求,这个时候有两种做法:

  1. 小明在导入后,重新去声明一遍想修改的变量,并且给一个新的值,写在后面的值会覆盖前面的;
  2. 你在你的sass源文件中用!default修饰变量值从而设置变量默认值,再发布出去给别人用,如$link-color:red !default。这个时候小明如果仅仅引入不想改,那么就是这个值,如果他想改,就可以在任何一处重新声明这个变量,那么就会变成小明的值。

两种方式都要重新声明,是不是“脱裤子放屁”呢?嗯,有点这个意思!区别在于:

变量值后面用!default修饰,就有了默认值,这个变量不管在哪里被声明,就会用声明的值,这意味着,你可以在引入含有需要修改变量值的sass文件前,声明这个变量为你要的值,后面引入的文件中的值不会覆盖你声明的变量值。

3. 怎么回到CSS原生的@import机制

下面的任一情况都会导致使用CSS原生的@import机制:

  1. 被导入文件的名字以.css结尾;
  2. 被导入文件的名字是一个URL地址;
  3. 被导入文件的名字是CSS的url()值。

三. 注释——看得见和看不见

Sass的注释有两种形式,一种是来自CSS的注释风格,用\**\包裹,这种注释当Sass文件被编译输出css时是会输出的,

另一种注释方式是,以//开头的单行注释,这被称为静默注释,因为这样的注释在被编译输出css时是不会被输出到CSS文件中的,此外,这种注释写起来简单快捷啊。

四. 小结

保持条理性和可读性的3种基本方式,拆分不同板块的Sass文件,然后通过@import引入;嵌套选择器和属性,不但可以帮助增加层次和条理,还能减少打字量(变相减少了打字出错);注释永远是一个好习惯。

© 著作权归作者所有

共有 人打赏支持
Stinson_Zhao
粉丝 82
博文 12
码字总数 54621
作品 0
杭州
程序员
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着s...

Stinson_Zhao ⋅ 2016/11/29 ⋅ 0

SASS/SCSS入门笔记

什么是SASS? SASS(Syntactically Awesome Stylesheets)是一种动态样式语言,为CSS融入了编程元素,提供了很多便利的写法,使得CSS的开发变得简单、可维护。先来回顾一下CSS,接触过WEB开发的...

桂圆_noble ⋅ 2016/08/02 ⋅ 0

sass笔记-3|Sass基础语法之样式复用和保持简洁

上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式都能复用样式,使用它们...

Stinson_Zhao ⋅ 2016/12/05 ⋅ 0

compass&sass高级应用

一./背景知识/ 1.Sass是什么?   Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一...

Billydotzhang ⋅ 2016/10/27 ⋅ 0

Sass入门介绍

CSS预处理器,用一种专门的语言进行页面Web样式设计,编译生成正常的CSS文件以供使用,可以让CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护。 优秀的CSS预处理器语言包括Sass、LES...

刘尐六 ⋅ 2017/05/26 ⋅ 0

Sass基础的入门语法笔记

变量 sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。 特殊变量 一般我们定义的变量都...

楠木楠 ⋅ 2016/12/04 ⋅ 0

学习之路/CSS扩展语言SASS

CSS扩展语言SASS学习 欢迎阅读我所有的学习之路系列文章: 学习之路系类文章目录 介绍 SASS官网: Sass is the most mature, stable, and powerful professional grade CSS extension langua...

DennisGuo ⋅ 2015/11/23 ⋅ 2

从sass到PostCSS

原文链接:From Sass to PostCSS 译者:Icarus 邮箱:xdlrt0111@163.com 多年来我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件来尝试处理样式.我爱死了现在就可以使用将来的CSS...

卢睿韬 ⋅ 2017/01/27 ⋅ 0

Sass语法介绍高级篇

响应式布局: @media 响应式布局设计的目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率。 比如,当你缩小网页的时候,网页的布局会跟着改变,这主要使用的是CSS...

刘尐六 ⋅ 2017/05/26 ⋅ 0

CSS的总结

写在前面 最近一直在学习CSS,感触良多,写一篇文章作为总结,以便于自己以后学习,也希望给大家行点方便 在前端的学习道路上,说道比如掌握的东西,再不济的人都会脱口而出,HTML、CSS、Jav...

熊蛋子17 ⋅ 2017/11/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部