原文在 https://github.com/zhongxia245/blog , 欢迎 star!
Sass理解
时间:2016-09-24 22:56:12
作者:zhongxia
这里就不讲解Sass的安装以及语法了,因为参考文章中,阮一峰老师写的很详细,另外一篇也写的很不错,直接学习即可。 这里主要写下自己的看法,或者不懂的地方。
常规的CSS是不支持变量,函数,以及一些简单的判断,计算等。只有单纯的描述,如果多个地方使用同一个颜色,或者字体大小,要修改起来比较麻烦。
因此,就有人给CSS加入了一些编程元素,这被叫做 "CSS预处理器"(css preprocessor)
常见的 CSS预处理器,有Less, Sass , Stylus
强调
- sass不是css的替代品,它只是让css变得更加高效、可维护
- 永远不要修改生成后的css
- 部署到线上的是生成的css文件,不是sass文件
sass的工作流如下图
Sass文件格式
Sass 有两种文件格式
.sass文件
.sass文件是缩进式的写法,对格式要求比较严谨,末尾不能有分号, 属性和值之间有一个空格
.test
margin: 5px 10px
font-size: 14px
color: #333
.scss文件
.scss文件 和 css 一致
.test {
margin: 5px 10px;
font-size: 14px;
color: #333;
}
Sass 的 import 导入功能
css有一个不太常用的特性,即@import导入功能,它允许在一个css文件中导入其他css文件。然而,结果是只有执行到@import规则时,浏览器才会去下载其他css文件,这会导致页面样式加载特别慢,从而容易出现页面闪的问题。
但是 sass中,使用 import则可以规避这个问题, 因为sass最终会生成一个CSS文件,在生成的时候,会把导入的CSS 给合并到CSS文件里面。
在使用@import导入sass文件时,可以省略sass文件的后缀名.sass或.scss,例如:
//a.scss
body {
background-color: #f00;
}
//style.scss
@import "a";
div {
color: #333;
}
编译后的style.css文件内容如下:
body {
background-color: #f00;
}
div {
color: #333;
}
参考文章
【CSS】Sass理解的更多相关文章
-
CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
-
CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...
-
CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
-
CSS深入理解之absolute(HTML/CSS)
absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...
-
CSS &; SASS &; SCSS &; less
CSS & SASS & SCSS & less less vs scss https://github.com/vecerek/less2sass/wiki/Less-vs. ...
-
使用stylelint对CSS/Sass做代码审查
对样式审查?很少人会这么做吧,但实际上开发者应该有这样的态度,尤其是不同团队多人开发时,这一点尤为重要. 在本文中,我将陈述两点:一是为什么我们需要对样式进行审查,二是如何将审查工具融合到整体的构建流 ...
-
【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
-
关于DIV+CSS和XHTML+CSS的理解
WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...
-
转 - CSS深入理解vertical-align和line-height的基友关系
一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦 ...
随机推荐
-
lcov和gcov的使用错误
编译使用的gcc版本和gcov的版本对不上的话,使用lcov和gcov的时候会报错 lcov的错误: [xx@localhost XXX]$ lcov --capture --directory co ...
-
Borland C++建立工程菜鸟教程
实在不敢相信,学校里现在教学用的编译器还是七八十年代的老古董,难道这东西更能培养从没接触过代码的学生深刻理解c语言的运行流程,不得不说像VisualStdio这样的重量级开发环境确实屏蔽了很多底层的运 ...
-
对Hadoop体系的一点认识
前言:Hadoop体系核心大多源自Google的思想,里面的思想的确很精彩!比如分布式计算,云的思想等,比起其他简单技术,更使得我想写这文章, 虽然这个东东在一般公司不可能用到! 首先由于hadoop ...
-
HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码
横幅广告(Banner): 1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上:当用户单击这些横幅广告时,通常可以链接到相应的广告页面: 2.设计横幅广告时,要力求简单明了,能够体现出主要的中 ...
-
C# 在vs2010中打开vs2012的项目(转)
在vs2010中打开vs2012的项目 今天在自己的电脑上装了vs2010然后要打开之前在vs2012上创建的sln文件 被提示-- 无法打开在新版本上创建的sln--解决方案--文件 其实vs201 ...
-
Android 自定义属性(attrs.xml,TypedArray)
做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组 件不够用,自定义组件就不可避免了.那么如何才能做到像官 ...
-
HTTP SOAP Request
public string SoapRequest(string url, string message, string type, Encoding encoding) { string resul ...
-
linux内核中的排序接口--sort函数
linux内核中的sort函数,其实跟我们所说的qsort函数很像,我们来看看qsort: qsort 的函数原型是 void qsort(void*base,size_t num,size_t wi ...
-
mysql配置记录
[mysqld] datadir=/app/data/mysql socket=/app/data/mysql/mysql.sock symbolic-links=0 validate_passwor ...
-
VSCode中怎么改变文件夹的图标
昨天更新了VSCode后我的文件夹图标莫名其妙的没有了,变成了下图这样 看着真的让我难受的头皮发麻,本来打代码就头发少,难道非要让我变成秃头,不可能不可能,所以我找了找怎么解决 来,各位看官上眼 如图 ...