文档章节

学习之路/CSS扩展语言SASS

DennisGuo
 DennisGuo
发布于 2015/11/23 22:48
字数 1362
阅读 94
收藏 5
点赞 0
评论 2

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 ⋅ 0

使用LESS或Sass重构CSS代码

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

晨曦之光 ⋅ 2012/03/09 ⋅ 0

CSS的总结

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

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

compass&sass高级应用

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

Billydotzhang ⋅ 2016/10/27 ⋅ 0

sass 快速入门学习

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

笔阁 ⋅ 2015/12/11 ⋅ 0

Vue学习曲线

vue如今已是前端最火热的框架技术之一了,如何从0到掌握vue技术,在此介绍一下学习曲线和途径。 前端入门 以下是前端基础语言推荐的学习链接(过完一片后可以作为参考手册使用) html css js 另...

iceuncle ⋅ 2017/11/28 ⋅ 0

Sass 快速入门学习

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

笔阁 ⋅ 2015/12/11 ⋅ 2

通过LESS/Sass自定义Bootstrap的式样

一、定制Bootstrap 在实际前端UI开发中,对Bootstrap的式样进行自定义是必要的。 定制Boostrap的式样的方法通常有如下几种: 覆盖原有的bootstrap式样 通过构建器,对bootstrap中的式样变量自...

dhb_oschina ⋅ 2016/05/21 ⋅ 0

Sass入门介绍

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

刘尐六 ⋅ 2017/05/26 ⋅ 0

SASS/SCSS入门笔记

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

桂圆_noble ⋅ 2016/08/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

收集自网络的wordpress 分页导航的代码教程(全网最全版)

wordpress 分页导航是用来切换文章的一个功能,添加了 wordpress 分页导航后,用户即可自由到达指定的页面数浏览分类文章,而这样的一个很简单功能却有很多朋友在用插件:WP-PageNavi,插件的...

Rhymo-Wu ⋅ 22分钟前 ⋅ 0

微服务 WildFly Swarm 入门

Hello World 就像前面章节中的其他框架一样,我们希望添加一些基本的 Hello-world 功能,然后在其上逐步添加更多的功能。让我们从在我们的项目中创建一个 HolaResources 开始。您可以使用您的...

woshixin ⋅ 29分钟前 ⋅ 0

Maven的安装和Eclipse的配置

1. 下载Maven 下载地址 2. 解压压缩包,放到自己习惯的硬盘中 此处我将其放到了 D:\Tools 目录下。 3. 配置环境变量 右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量。 在系统变量中新建,变...

影狼 ⋅ 37分钟前 ⋅ 0

python pip使用国内镜像的方法

国内源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://......

良言 ⋅ 37分钟前 ⋅ 0

对于url变化的spa应该如何使用微信jssdk

使用vue单页面碰上微信jssdk config验证失败的坑。第一次成功 之后切换页面全部失败,找到了解决方法,第一次验证成功后保存验证信息 切换页面时验证信息直接拿来用,加一个wx.error() 失败时...

孙冠峰 ⋅ 42分钟前 ⋅ 0

Spring Cloud Gateway 一般集成

SCF发布,带来很多新东西,不过少了点教程,打开方式又和以前的不一样,比如这个SCG,压根就没有入门指导,所以这里写一个,以备后用。 一、集成 pom.xml <dependency> <groupI...

kut ⋅ 45分钟前 ⋅ 0

建造模式

《JAVA与模式》之建造模式

Cobbage ⋅ 59分钟前 ⋅ 0

WePY框架开发的小程序如何在微信web开发者工具中运行起来

一、首先需要安装node.js,安装步骤如下: 首先下载安装包 https://nodejs.org/en/download/ 点击下载相应的zip版本 然后将文件夹解压到任意目录 比如我这里解压到了:C:\Program Files\node...

Helios51 ⋅ 今天 ⋅ 0

使用EnumSet 代替位域(32)

1、位域(Bit field):使用or 运算将几个常量合并到一个集合中 位操作,可以有效地执行 AND 、OR 这样的位操作 但是 位域比int 常量枚举缺点更多 2、java.util 包里面的EnumSet 类是有效的替...

职业搬砖20年 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部