Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。



特性概览

CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量、嵌套、混合、继承等特性,让CSS的书写更加有趣与程式化。

变量

变量用来存储需要在CSS中复用的信息,例如颜色和字体。SASS通过$符号去声明一个变量。

$font-stack: Helvetica, sans-serif;
$primary-color: #333; body {
font: 100% $font-stack;
color: $primary-color;
}

上面例子中变量$font-stack和$primary-color的值将会替换所有引用他们的位置。

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

嵌套

SASS允许开发人员以嵌套的方式使用CSS,但是过度的使用嵌套会让产生的CSS难以维护,因此是一种不好的实践,下面的例子表达了一个典型的网站导航样式:

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
} li { display: inline-block; } a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

大家注意上面代码中的ul、li、a选择器都被嵌套在nav选择器当中使用,这是一种书写更高可读性CSS的良好方式,编译后产生的CSS代码如下:

nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

引入

SASS能够将代码分割为多个片段,并以underscore风格的下划线作为其命名前缀(_partial.scss),SASS会通过这些下划线来辨别哪些文件是SASS片段,并且不让片段内容直接生成为CSS文件,从而只是在使用@import指令的位置被导入。CSS原生的@import会通过额外的HTTP请求获取引入的样式片段,而SASS的@import则会直接将这些引入的片段合并至当前CSS文件,并且不会产生新的HTTP请求。下面例子中的代码,将会在base.scss文件当中引入_reset.scss片断。

// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
} // base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

SASS中引入片断时,可以缺省使用文件扩展名,因此上面代码中直接通过@import 'reset'引入,编译后生成的代码如下:

html, body, ul, ol {
margin: 0;
padding: 0;
} body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

混合

混合(Mixin)用来分组那些需要在页面中复用的CSS声明,开发人员可以通过向Mixin传递变量参数来让代码更加灵活,该特性在添加浏览器兼容性前缀的时候非常有用,SASS目前使用@mixin name指令来进行混合操作。

@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
} .box {
@include border-radius(10px);
}

上面的代码建立了一个名为border-radius的Mixin,并传递了一个变量$radius作为参数,然后在后续代码中通过@include border-radius(10px)使用该Mixin,最终编译的结果如下:

.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

继承

继承是SASS中非常重要的一个特性,可以通过@extend指令在选择器之间复用CSS属性,并且不会产生冗余的代码,下面例子将会通过SASS提供的继承机制建立一系列样式:

// 这段代码不会被输出到最终生成的CSS文件,因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
} // 下面代码会正常输出到生成的CSS文件,因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
} .message {
@extend %message-common;
} .success {
@extend %message-common;
border-color: green;
} .error {
@extend %message-common;
border-color: red;
} .warning {
@extend %message-common;
border-color: yellow;
}

上面代码将.message中的CSS属性应用到了.success、.error、.warning上面,魔法将会发生在最终生成的CSS当中。这种方式能够避免在HTML元素上书写多个class选择器,最终生成的CSS样式是下面这样的:

.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; } .success {
border-color: green; } .error {
border-color: red; } .warning {
border-color: yellow; }

操作符

SASS提供了标准的算术运算符,例如+、-、*、/、%。在接下来的例子里,我们尝试在aside和article选择器当中对宽度进行简单的计算。

.container { width: 100%; }

article[role="main"] {
float: left;
width: 600px / 960px * 100%;
} aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}

上面代码以960px为基准建立了简单的流式网格布局,SASS提供的算术运算符让开发人员可以更容易的将像素值转换为百分比,最终生成的CSS样式如下所示:

.container {
width: 100%; } article[role="main"] {
float: left;
width: 62.5%; } aside[role="complementary"] {
float: right;
width: 31.25%; }

CSS扩展

引用父级选择器"&"

Scss使用"&"关键字在CSS规则中引用父级选择器,例如在嵌套使用伪类选择器的场景下:

/*===== SCSS =====*/
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
} /*===== CSS =====*/
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }

无论CSS规则嵌套的深度怎样,关键字"&"都会使用父级选择器级联替换全部其出现的位置:

/*===== SCSS =====*/
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
} /*===== CSS =====*/
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }

"&"必须出现在复合选择器开头的位置,后面再连接自定义的后缀,例如:

/*===== SCSS =====*/
#main {
color: black;
&-sidebar { border: 1px solid; }
} /*===== CSS =====*/
#main {
color: black; }
#main-sidebar {
border: 1px solid; }

如果在父级选择器不存在的场景使用&,Scss预处理器会报出错误信息。

嵌套属性

CSS许多属性都位于相同的命名空间(例如font-family、font-size、font-weight都位于font命名空间下),Scss当中只需要编写命名空间一次,后续嵌套的子属性都将会位于该命名空间之下,请看下面的代码:


/*===== SCSS =====*/
.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
} /*===== CSS =====*/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }

命令空间上可以直接书写CSS简写属性,但是日常开发中建议直接书写CSS简写属性,尽量保持CSS语法的一致性。


.demo {
font: 20px/24px fantasy {
weight: bold;
}
} .demo {
font: 20px/24px fantasy;
font-weight: bold;
}

SCSS 简要教程(常用指令与方法)的更多相关文章

  1. ROS零门槛学渣教程系列(二)——Linux常用指令:mkdir、tar、 unzip、cp、scp、mv、rm、find、apt、ssh

    Linux常用指令通过上一教程,我们获得了ubuntu系统.Linux是一个很大的领域.但不要紧张,我们一步步来就是了,跟着教程,需要能用到新知识,会提前介绍给大家.下面学习几个常用的Linux指令. ...

  2. docker创建image方法以及常用指令介绍

    docker -help    # 显示帮助 docker COMMAND -help    # 帮助信息更详细 docker start “容器名称”    # 启动一个或多个容器 docker s ...

  3. MATLAB(4)——图片保存方法汇总及常用指令

    作者:桂. 时间:2017-03-03  19:30:03 链接:http://www.cnblogs.com/xingshansi/p/6498318.html 前言 本文为MATLAB系列第四篇. ...

  4. ImageMagick常用指令详解

    Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...

  5. Linux 常用命令使用方法大搜刮

    Linux 常用命令使用方法大搜刮 1.# 表示权限用户(如:root),$ 表示普通用户  开机提示:Login:输入用户名  password:输入口令   用户是系统注册用户成功登陆后,可以进入 ...

  6. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  7. vue 的基本语法和常用指令

    什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  8. phpstorm10.0.3破解版安装教程及汉化方法

    phpstorm是一个轻量级且便捷的PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查.不但是php开发的利器,前端开发也是毫不逊色的.下面记录php ...

  9. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

随机推荐

  1. 如何在 Java 中实现无向环和有向环的检测

    无向环 一个含有环的无向图如下所示,其中有两个环,分别是 0-2-1-0 和 2-3-4-2: 要检测无向图中的环,可以使用深度优先搜索.假设从顶点 0 出发,再走到相邻的顶点 2,接着走到顶点 2 ...

  2. VirtualBox使用报错

    VirtualBox使用报错 1.启动报错:Failed to instantiate CLSID_VirtualBox... 报错内容: Failed to instantiate CLSID_Vi ...

  3. JAVA语言学习day16--7月22日

    ###15用户选择功能 * A: 用户选择功能 * a: 案例代码 import java.util.ArrayList; import java.util.Scanner; /* * 超市管理系统主 ...

  4. .NET 7 Preview 3添加了这些增强功能

    .NET 7 Preview 3 已发布, .NET 7 的第三个预览版包括对可观察性.启动时间.代码生成.GC Region.Native AOT 编译等方面的增强. 有兴趣的用户可以下载适用于 W ...

  5. Sentinel基础应用

    Sentinel 是什么? 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. Sentinel ...

  6. JMeter如何设置中文

    打开Option => Choose Language => Chinese

  7. Http GET 请求参数中文乱码

    两种解决方式 第1种:代码里转换 String name = request.getParamter("name"); String nameUtf8 = new String(n ...

  8. 灵感乍现!造了个与众不同的Dubbo注册中心扩展轮子

    hello大家好呀,我是小楼. 作为一名基础组件开发,服务好每一位业务开发同学是我们的义务(KPI). 客服群里经常有业务开发同学丢来一段代码.一个报错,而我们,当然要微笑服务,耐心解答. 有的问题, ...

  9. LintCode-165 · 合并两个排序链表-题解

    描述:将两个排序(升序)链表合并为一个新的升序排序链表样例 1:输入: list1 = null, list2 = 0->3->3->null输出: 0->3->3-&g ...

  10. 超详细的Linux 用户与用户组知识

    一个执着于技术的公众号 1.用户和组的概念 Linux系统对用户与组的管理是通过ID号来实现的.我们在登录系统时,输入用户名与对应密码,操作系统会将用户名转化为ID号后再判断该账号是否存在,并对比密码 ...