SASS 学习笔记

基础知识

这部分内容摘自 Sass Basics。

预处理 Preprocessing

预处理功能,就是将 SASS/SCSS 格式的文件输出为 CSS 文件,可以对单个文件进行预处理,也可以对指定目录进行预处理,还可以对指定目录进行实时监控,基本语法如下:

sass input.scss output.csssass --watch app/sass:public/stylesheets

变量 Variables

有了变量功能,就可以很方便地实现一处定义、多处使用,终于不用一遍遍地复制粘贴了。SASS 中的变量以 $ 开头。

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

输出后的 CSS 文件如下所示:

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

嵌套 Nesting

有了嵌套功能,可以更高效地书写 CSS,不过嵌套的层数过多会使得代码质量严重下降,所以要严格控制嵌套的层数,以不超过三层为宜。

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

处理后生成的 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;}

引入 Partials

引入文件与 C/C++ 中的头文件很相似,都是把常用的代码段保存至文件中,然后在其它文件中引用。SASS 中的引入文件以下划线开头:_partial.sass,在其它文件中引用时,用命令 @import partial 即可,引用时不需要带文件名开头的下划线和扩展名。

导入 Import

CSS 本身就提供了导入的选项,这样就将 CSS 进一步分割成了代码更少、更容易维护的代码段,但是在 CSS 中每一条 @import 语句都会产生一次 HTTP 请求。SASS 则在此基础上进一步做了改进,每一个需要从别处导入内容的 CSS 文件,SASS 都会将需要导入的内容合并到当前的 CSS 文件中,这样就不会有 CSS 那样产生额外的 HTTP 请求的情况了。

比如现在有一个引入文件 _reset.scss,在另一个文件 base.scss 中要引用它,两个文件内容如下所示:

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

经过 SASS 处理后,最终的 CSS 文件如下:

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

混合 Mixins

有时候同一个属性为了考虑到浏览器兼容性,就需要写好几行类似的语句,如果这组属性值还会经常变,改动起来的工作量可就要了老命了。不过 SASS 提供了混合功能,就能够让我们“一次修改,整体更新”。这个混合功能,其实和常见的编程语言中的函数功能很相似,看代码:

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

通过上面的代码,就很容易能看明白混合是如何定义并被调用的,这里还用到了前面介绍的变量概念。最后生成的 CSS 如下所示:

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

这个示例代码还涉及到了浏览器前缀这个概念,Vendor Prefix:为什么需要浏览器引擎前缀这篇文章也讲了浏览器前缀的作用、适用情况及其用法,但是之后即将学习的 Gulp 可以集成 Autoprefixer,这样就可以把补充浏览器前缀的工作交给自动化工具,所以在这里不再深入讨论这个概念了。

继承 Extend/Inheritance

继承可是 SASS 中最常用的功能之一,通过 @extend 命令,可以将应用于一个选择器的属性分享给另一个选择器,这样就可以进一步简化 SASS 的代码了。比如下面的示例代码先是创建了一个基础的 message 选择器,然后在此基础上又创建了 success、error、warning 这三个“派生”的选择器,它们仨共享 message 的属性,同时各自又有不同的边框属性。

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

并且最终生成的 CSS 代码也很简洁,怎么样,很不错吧?

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

运算符 Operators

在 SASS 中,还可以进行简单的加减乘除以及取余这五种运算。

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

上面的代码创建了一套基础宽度为 960px 的流式网格(fluid grid),并且根据不同部分的宽度计算其对应的百分比,所生成的 CSS 如下:

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

好了,基础知识就讲到这里了,现在就拿起自己的代码来练习吧!

关键字:css, sass

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部