文档章节

学习之路/CSS扩展语言SASS

DennisGuo
 DennisGuo
发布于 2015/11/23 22:48
字数 1362
阅读 94
收藏 5

CSS扩展语言SASS学习

欢迎阅读我所有的学习之路系列文章: 学习之路系类文章目录

介绍

SASS官网: Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

百科: Sass 扩展了 CSS3,增加了 嵌套变量混入选择器继承 等等特性。 Sass 生成良好格式化的 CSS 代码,易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。 Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

环境安装

使用方式2种:1、Applicaition(使用工具软件);2、Command Line(命令行)。

我使用的Mac,并且我选择使用第2种方式。

SASS的编译依赖Ruby,所以需要先安装Ruby.

Linux

是可以使用系统的包管理工具或者rbenvrvm进行安装.

Windows

安装Windows版本的ruby,Rubyinstaller

Mac

Mac系统自带ruby无需特别安装

安装好Ruby之后,使用以下命令检查是否安装正确

$ ruby -v
--
ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]
$ gem -v
--
2.0.14

命令

在准备好Ruby环境之后

安装

$ gem install sass

如果在Mac或者Linux下执行报权限问题,请在命令前加 sudo 获取root权限.

查看版本

$ sass -v
--
Sass 3.4.19 (Selective Steve)

编译SASS文件

将sass文件编译为CSS文件

$ sass input.sass output.css

监控sass文件变化,并实时编译成CSS文件

$ sass --watch input.sass:output.css

也可以监控文件夹的方式来实时编译CSS文件,如把app/sass目录实时编译到public/css中

$ sass --watch app/sass:public/css

基本语法

SASS的语法比较简单,包括:

  • Variables(变量)
  • Nesting(嵌套)
  • Import(文件引入)
  • Maxins(混入)
  • Extend/Inheritance(扩展和继承)
  • Operators(运算符)

Variables(变量)

那些在样式中可以进行复用的值都可以设置为变量,例如:字体,颜色等。

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

以上SASS代码编译成CSS代码之后结果如下:

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

Nesting(嵌套)

SASS使我们可以像HTML结构嵌套一样使用样式。

nav
  ul
    margin: 0
    padding: 0
    list-style: none

    li
      display: inline-block

      a
        display: block
        padding: 6px 12px
        text-decoration: none

以上SASS代码,结构嵌套一个导航的结构样式,提高了代码更有可读性,编译后的CSS代码如下:

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

Import(文件引入)

css虽然也提供了@import引入外部文件,但是会增加HTTP请求。而SASS提供的@import文件引入是将所有的文件最终合并到一个CSS文件中,多个文件引入最终只有一个HTTP请求。

_reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

编译后的css文件如下

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

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

Maxins(混入)

可以理解为Maxin混入是在sass中方法定义和调用,可以通过定义一个可以复用的方法,进行调用。 例如:可以我们定义一个Maxin为border-radius实现对所有浏览器厂商的支持,重复使用此Maxin可以减少编写重复的代码

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

其中通过=号定义一个Maxin,通过+进行调用,编译后的css如下:

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

Extend/Inheritance(扩展和继承)

这里的扩展和继承,可以理解为面向对象思想中的继承,我们可以定义通用的样式基类,然后扩展出不同的子类,这些扩展的子类就继承了基类的所有样式。

.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

其中.message是样式基类,扩展子类.success,.error,.warning都继承至.message并拥有其样式属性。 以上sass编译之后得到的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(运算符)

在css编写过程中,一些基本的数学运算是非常有用的。基本的数据运算包括:+-*/%。 例如我们在设置内容和边栏布局的时候可以有如下sass写法:

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complimentary"]
  float: right
  width: 300px / 960px * 100%

以上我们就编写了一个960像素宽的响应式网格布局,编译后的css如下:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

总结

以上内容就是sass的最基本的知识点和使用方式,但是在应用到实际的开发环境中的时候,并不会单独的使用sass。一般会辅以其他相关的构建工具,在接下来的学习中,我会去探索如何在实际的项目中应用sass。

© 著作权归作者所有

共有 人打赏支持
DennisGuo
粉丝 2
博文 7
码字总数 3193
作品 0
北京
架构师
加载中

评论(2)

DennisGuo
DennisGuo

引用来自“丨Tank”的评论

你好
你也好~
丨Tank
丨Tank
你好
学习之路/目录

目标 从今日起,我将开启我的学习模式,我会将我每学习的一个技能,分享学习的过程和内容,在记录自己知识点的同时也分享经验,有不足之处还希望朋友们见谅,毕竟本人能力有限。 路线 我的知...

DennisGuo
2015/11/23
55
0
使用LESS或Sass重构CSS代码

作者 Werner Schuster 译者 杨晨 发布于 2009年7月28日 上午5时56分 在Web开发中,CSS的使用是非常普遍的,但滥用的情况也是屡见不鲜。LESS 和Sass 都是用Ruby实现的工具,可以帮助开发者写出...

晨曦之光
2012/03/09
0
0
CSS的总结

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

熊蛋子17
2017/11/27
0
0
compass&sass高级应用

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

Billydotzhang
2016/10/27
5
0
sass 快速入门学习

什么是css预处理器   众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。   在程序员眼里,CSS是一件很麻烦的东西...

笔阁
2015/12/11
585
0

没有更多内容

加载失败,请刷新页面

加载更多

play framework 如何支持多数据源

有段时间没有写博客了,但今天又写一篇了,主要是因为这事有一丝自己的思考和动手实践,所以就记录下来了。 现有的问题: play 1.2.4 两台数据库服务器,但是play1.2.4 并不支持同时连接两台...

tuerqidi
17分钟前
0
0
Mysql only_full_group_by解析

查看当前数据库模式: select @@sql_mode; 原因: mysql 5.7中的sql_mode的值中包含'ONLY_FULL_GROUP_BY'; 处理:执行以下SQL set GLOBAL sql_mode ='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,N......

年轻的中年大叔
19分钟前
1
0
防止表单重复提交

1:前端方式(治标不治本) $("#admin-role-save").click(function(){//admin-role-save为submit的idvar ts=$(this);var ts_old_val=ts.val();ts.val("提交中....");ts.att...

uug
19分钟前
1
0
保持屏幕常亮

getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON, WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); 在act的created方法中调用即可,一般是播放视频的时候......

Carbenson
19分钟前
1
0
智能合约实施指南

与区块链技术一样,智能合约在商业领域也非常有价值。 为了让我们的读者彻底了解智能合约是什么以及它们如何影响现代商业的交易方式,我们准备了本指南。 集中商业模式正在给去中心化的模式让...

geek12345
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部