文档章节

Sass 快速入门学习

笔阁
 笔阁
发布于 2015/12/11 09:05
字数 1598
阅读 179
收藏 2
点赞 0
评论 2

什么是css预处理器

  众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。

  在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。

enter image description here

  为了解决css的不足,开发者们想到了编写一种对css进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成css供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

什么Sass

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大的功能和Ruby on Rails 的大力推动,逐渐被更多开发者使用。

Sass 是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早成熟css预处理语言。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格。

Sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的Sass也被称为Scss。

Sass 和 SCSS 有什么区别?

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 先来看一个示例:Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #fff //定义变量
 
body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法

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

编译出来的 CSS

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

文件后缀名

sass有两种后缀名文件:

一种后缀名为sass,不使用大括号和分号; 另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。 而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1
 
//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

注意:“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。 ps:本文采用的语法格式都将使用的是 SCSS 语法格式。

四种style生成后的css

在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:

  • 嵌套输出方式 nested
  • 展开输出方式 expanded
  • 紧凑输出方式 compact
  • 压缩输出方式 compressed

在知识点中,嵌套输出方式,在前端是可以看到效果的,后几种方式是需要在命令行中编译的,在编译的时候分别带上参数“ --style expanded --style compact --style compressed”:

Sass 提供了一种嵌套显示 CSS 文件的方式

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

nested 编译出来:

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

expanded 这个输出的 CSS 样式风格和 nested 类似,只是大括号在另起一行,同样上面的代码,编译出来:

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

compact 编译出来:

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

compressed 编译出来:

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

声明变量

JavaScript中声明变量都是使用关键词“var”开头,但是在 Sass 不使用这个关键词,而是使用美元符号“$”开头。

变量声明

Sass 的变量包括三个部分:

  • 声明变量的符号“$”

  • 变量名称

  • 赋予变量的值

    //sass style $highlight-color: #F90;

变量的引用

  凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用。css生成时,变量会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。

$color: #F90;
.box2 {
  border: 1px solid $color;
}
 
//编译后
 
.box2 {
  border: 1px solid #F90;
}

  看上边示例中的$color变量,它被直接赋值给border属性,当这段代码被编译输出css时,$color会被#F90这一颜色值所替代。产生的效果就是给box2这个类一条1像素宽、实心且颜色值为#F90的边框。

  在声明变量时,变量值也可以引用其他变量。当你通过粒度区分,为不同的值取不同名字时,这相当有用。下例在独立的颜色值粒度上定义了一个变量,且在另一个更复杂的边框值粒度上也定义了一个变量:

$color: #F90;
$border: 1px solid $color;
.box2 {
  border: $border;
}
 
//编译后
 
.box2 {
  border: 1px solid #F90;
}

  这里,$border变量的声明中使用了$color这个变量。产生的效 果就跟你直接为border属性设置了一个1px $color solid的值是一样的。

更多内容和示例参考: http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/

© 著作权归作者所有

笔阁
粉丝 167
博文 100
码字总数 182740
作品 0
海淀
程序员
加载中

评论(2)

笔阁
笔阁

引用来自“_简简单单_”的评论

sass 开发的时候是不是一定要开启控制台,监听所编写的 sass 文件?
我用 less 的时候页面引入 less.js 就可以实时的编写 Less 文件了
就是在编译Sass时,开启watch功能是程序员的方式,由于浏览器不支持sass,所以应用的是编译后的css。你可以用gui工具编译如Koala,也可以用自动化工具如gulp。
_简简单单_
_简简单单_
sass 开发的时候是不是一定要开启控制台,监听所编写的 sass 文件?
我用 less 的时候页面引入 less.js 就可以实时的编写 Less 文件了
Vue学习曲线

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

iceuncle ⋅ 2017/11/28 ⋅ 0

sass 快速入门学习

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

笔阁 ⋅ 2015/12/11 ⋅ 0

react-router入门

如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者,初学reactjs的时候,如果你不会webpack,相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp,...

馒头 ⋅ 2016/03/08 ⋅ 0

[FungLeo原创]CSS预编译技术之SASS学习经验小结

[FungLeo原创]CSS预编译技术之SASS学习经验小结 前言 接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些...

FungLeo ⋅ 2016/03/11 ⋅ 0

Less-学习前的准备工作

学习less,我们肯定要有相应的环境,我们预览网址 http://www.1024i.com/demo/less/ 提供了2种方法,我们采用服务端用法,不过只是用前半部分,就是把写好的less文件转为css文件,html引用的...

透笔度 ⋅ 2015/10/16 ⋅ 0

WEB前端开发初学者必看的学习路线(附思维导图)

很多同学想学习WEB前端开发,虽然互联网有很多的教程、网站、书籍,可是却又不知从何开始如何选取。看完网友高等游民白乌鸦无私分享的原标题为《写给同事的前端学习路线》这篇文章,相信你会...

inw3cschool ⋅ 2017/03/10 ⋅ 0

WEB前端开发初学者必看的学习路线(附思维导图)

很多同学想学习WEB前端开发,虽然互联网有很多的教程、网站、书籍,可是却又不知从何开始如何选取。看完网友高等游民白乌鸦无私分享的原标题为《写给同事的前端学习路线》这篇文章,相信你会...

inw3cschool ⋅ 2017/03/09 ⋅ 0

写给同事的前端学习路线

前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念: HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层,它的目的是表示一块内容以什...

么么哒lalala ⋅ 2016/01/04 ⋅ 0

值得参考的 10 个 LESS CSS 实例

LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS,以更少的代码完成更多的样式。 学习...

红薯 ⋅ 2012/03/28 ⋅ 14

08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习 npm 学习 官方文档 推荐资料 需要了解的知识点 有时间专门写一个这样的专题,如果需要可以邮件我。malun666@126.com webpack基础学习 官方文档 Webpack了解的知识点: es...

aicoder ⋅ 2017/11/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 30分钟前 ⋅ 0

spring RESTful

spring RESTful官方文档:http://spring.io/guides/gs/rest-service/ 1. 可以这么去理解RESTful:其实就是web对外提供的一种基于URL、URI的资源供给服务。不是一个原理性知识点。是一个方法论...

BobwithB ⋅ 32分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 35分钟前 ⋅ 0

@Conditional派生注解

@Conditional派生注解(Spring注解版原生的@Conditional作用) 作用:必须是@Conditional指定的条件成立,才给容器中添加组件,配置配里面的所有内容才生效; @Conditional扩展注解 作用(判...

小致dad ⋅ 35分钟前 ⋅ 0

适配器模式

适配器模式 对象适配器 通过私有属性来实现的类适配器 通过继承来实现的接口适配器 通过继承一个默认实现的类实现的

Cobbage ⋅ 39分钟前 ⋅ 0

Java 限流策略

概要 在大数据量高并发访问时,经常会出现服务或接口面对暴涨的请求而不可用的情况,甚至引发连锁反映导致整个系统崩溃。此时你需要使用的技术手段之一就是限流,当请求达到一定的并发数或速...

轨迹_ ⋅ 43分钟前 ⋅ 0

GridView和子View之间的间隙

默认的情况下GridView和子View之间会有一个间隙,原因是GridView为了在子View被选中时在子View周围显示一个框。去掉的办法如下: android:listSelector="#0000" 或 setSelector(new ColorDra...

国仔饼 ⋅ 46分钟前 ⋅ 0

idea插件开发

1 刷新页面要使用多线程 2 调试要使用restart bug 不要去关闭调试的idea 否则再次启动会卡住

林伟琨 ⋅ 46分钟前 ⋅ 0

Java 内存模型

物理机并发处理方案 绝大多数计算任务,并不是单纯依赖 cpu 的计算完成,不可避免需要与内存交互,获取数据。内存要拿到数据,需要和硬盘发生 I/O 操作。计算机存储设备与 cpu 之间的处理速度...

长安一梦 ⋅ 53分钟前 ⋅ 0

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部