CSS拓展语言:Sass介绍

CSS拓展语言介绍

CSS拓展语言(CSS Preprocessor),也有叫做CSS预处理器。

CSS拓展语言出现的原因是,CSS自身支持的功能能有限(如不支持变量,条件控制,循环等编程元素),并不满足我们想要的一些功能。而CSS拓展语言支持CSS不支持的特性。

使用CSS拓展语言后,减少CSS的开发的时间,并且让CSS开发变得简单和可维护。

CSS拓展语言思想是:CSS拓展语言的定义了一套语法,按这些语法写的代码,编译生成对应的CSS。我们在网站上引用的是生成的CSS。因此,使用CSS拓展语言并不会产生额外的浏览器兼容性问题

下面是某CSS拓展语言的源码

$color: #f00;// 定义的变量
.color-red {
    color: $color;
}

编译后生成

.color-red {
    color: #f00;
}

常见的CSS拓展语言有:Sass,LessStylus

Sass是什么

Sass是世界上最成熟,稳定强大的专业的CSS拓展语言。

Sass 和所有版本的CSS完全兼容,有丰富的特性,成熟的核心团队,庞大的社区和非常多的基于Sass的框架。

Sass的安装

  1. 安装Ruby
  2. 命令行执行 gem install sass

看是否安装成功:在命令行中执行

sass -v

注意:由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。所以你会遇到 gem安装资源没反应,使用Taobao的RubyGem镜像可以解决这个问题。使用方式如下

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install rails

更多见Sass官网的安装指南

将Sass编译成CSS

将一个Sass文件编译成CSS

sass input.scss output.css

命令 Sass 监视文件的改动并更新 CSS

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录:

sass --watch app/sass:public/stylesheets

使用sass --help可以列出完整的帮助文档。

或者可以参考该项目的做法:用Gulp及插件来做。 当启动Gulp的任务后,src下的scss文件变化时,就会将scss文件编译成对应的CSS。

Sass的基本语法

Sass语法规则有两种,一种是通过tab键控制缩进的语法规则(缩进要求非常严格),这种语法对于熟悉Ruby的同学来说会非常的方便和喜欢。这种语法的Sass文件是以.sass后缀命名。另一种语法是SCSS,这是Sass的新的语法规则,他的外观和CSS的一模一样,文件后缀是.scss。如下所示:

//Sass语法
$width: 200px
.box
    width: $width

//SCSS语法
$width: 200px;
.box {
    width: $width;
}

Sass和SCSS的语法不能混用。下面介绍的都是SCSS的语法.

变量

变量以$开头,如

$color: #f00;
.color-red {
    color: $color;
}

计算功能

在代码中使用算式,如

$leftW: 100px;
.right-part{
    margin-left: $leftW + 10px;
}

嵌套

.box{
    .box-header{
        background-color: green;
        &:hover{
            background-color: red;
        }
    }
}

转化成如下CSS

.box .box-header{
    background-color: green;
}
.box .box-header:hover{
    background-color: red;
}

注释

单行注释 // comment,只保留在SASS源文件中,编译后被省略。 多行注释:/* comment */,会保留到编译后的文件。 在 /*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

插值

在选择器和属性上使用变量,必须用差值。否则会报错。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

生成

p.#foo {
  border-color: blue;
}

继承

一个选择器,继承另一个选择器。

.box {
    width: 100px;
}
.blue-box{
    @extend .box;
    background: bule;
}

Mixin

Mixin 有点像 C 语言的宏(macro),是可以重用的代码块。下面

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

%placeholder

和Mixin类似,只是%placeholder不支持参数,以及变量,调用是用@extend。%placholder不会被编译到CSS样式文件中。

关于是用 Mixin 还是 %placeholder :如果你需要使用变量,最好使用 Mixin,否则使用%placeholder。更详细的描述见这里

条件语句

@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

循环

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}    

函数

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

插入文件

@import命令,用来插入外部文件。

@import "path/filename.scss";

输出调试信息

@debug, @warn, @error。 调试信息均输出在命令行里。他们的区别只是信息的等级不同而已。

Sass是如何让CSS开发变得简单和可维护

减少重复

变量,继承,Mixin,函数的功能可以减少重复的代码。

简化代码

通过定义一些Mixin,函数,可以简化代码。如加浏览器前缀的Mixin,去浮动的Mixin等。

功能一样的放在一起

嵌套,插入文件的功能可以放在一起。

// box的样式
.box{
    .box-header{
        // ...
    }
    .box-body{
        // ...
    }
}

常见问题

在Windows下,遇到scss文件中有中文时,报如下错误

Error:     error path/to/include-chinese.scss (Line 136: Invalid GBK character"\xE8")

scss文件第一行加上

@charset "utf-8";

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

10+ 实用的 JavaScript 调试小技巧

除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者...

8010
来自专栏小狼的世界

PHP处理回车换行时应该注意的一个问题

在我们的数据入库、出库的时候要特别注意这个问题,特别是在进行显示处理的时候,比如使用表单中的 textarea 进行了一段文字的提交,客户端是Windows的话...

11510
来自专栏Java帮帮-微信公众号-技术文章全总结

错误集锦2.jsp页面syntax error,insert“}”to complete block

补:错误集锦1-HttpServlet was not found on the Java Build Path。 我们在用Eclipse进行Java web开...

37640
来自专栏腾讯Bugly的专栏

基于 Webpack & Vue & Vue-Router 的 SPA 初体验

最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,angularjs 已成昨日黄花,reactjs 如日...

39250
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

56580
来自专栏不止是前端

一次搞懂Event loop

47180
来自专栏iKcamp

微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

§ 视图与数据关联 本文配套视频地址: https://v.qq.com/x/page/z0554wyswib.html 开始前请把 ch3-3 分支...

186100
来自专栏Crossin的编程教室

【编程课堂】selenium 祖传爬虫利器

一些网页,比如微博,只有在登录状态才能进行页面的访问,或者对数据有比较复杂的验证和保护,直接通过网络请求进行登录并获取数据就会比较麻烦。这种时候,就该本篇的主角...

27740
来自专栏精讲JAVA

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个...

21060
来自专栏偏前端工程师的驿站

location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

 在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。   hash就是uri中#及后...

247100

扫码关注云+社区

领取腾讯云代金券