SASS笔记
前端开发离不开三剑客:html、Javascript、css.
- html:主要进行网页内容的开发语言;
- JavaScript: 主要对页面业务逻辑的开发语言;
- css:主要对网页外观样式进行注解的文本;
没错就是文本,css仅仅是一种文件格式,而非编程语言,那么有没有一种对网页样式进行编程的语言那,答案是肯定的,比如本篇文章的主角SASS,还有另外两种比较常用的css预处理器(框架)Less CSS、Stylus。
1. CSS预处理器的必要性
css主要对页面的DOM元素进行样式的设定,虽然某些样式也可以继承,比如font-size、opacity,CSS也提供了各种选择器,
其本质都是围绕DOM元素进行样式设定的,随着前端项目工程越来越大,样式文件的冗余性、可维护性带来的副作用也越发显得重要;
比如情景一,你的项目中定义了一个基本颜色,有上万处的不同元素运用了改样式,突然某天产品要求网站更新风格,换了一种色值,如何实现?
- 全局搜索该色值,将其替换为新的色值;
- 定义一个样式类,更改该样式类的色值,在每一处进行需要更改的DOM元素上添加该样式;
再比如情景二,你的项目多处引用了一个相似的border样式,仅仅是border的线宽不一样,如何实现?
- 定义多个样式类,每个样式类引用一种线宽;
不用css预处理器,我们同样可以满足产品的各种花式需求,仅仅是工作量大了一些,仅仅是重复的多写几行乃至几千行代码而已,仅此而已!!!
试想一下,加入我们的色值可以采用一个变量,只需要轻轻改变这个色值变量的值就可以满足场景一的需求;假如我们可以像编写JS代码一样写一个可输入变量的程序,
就可以满足产品设计场景二的需求,即便他有成千上万的线宽,你需要做的仅仅是更改一个变量即可;是的,CSS预处理器已经完全为我们实现了,这就是CSS预处理器存在的意义
2. SASS主要特性
CSS预处理器是一种语言,任何一种css预处理器都完全兼容css,它可以为CSS增加一些编程特性,无需考虑浏览器兼容性问题,让你在CSS中使用变量、简单的逻辑程序、函数等其他的一些功能,请不要停留在石器时代了,开启css编程的新起点吧;
2.1. sass提供四中可选的编程风格
- nested:嵌套缩进的css代码; ————默认风格
- expanded:没有缩进,扩展的css代码;
- compact :简介格式的css代码;
- compressed:压缩后的css代码;————生产环境使用
2.2. SASS主要功能
包括:变量支持、嵌套、混入(mixin)、继承、导入、函数、操作符
SASS笔记的更多相关文章
- sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它
Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性--脚本特性.Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,Sa ...
- Sass 笔记
Sass 笔记 1. 安装,依赖Ruby sass依赖Ruby, 所以Windows要先安装Ruby, Mac自带无需安装 $ gem install sass 2. 两种文件格式 sass scss ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- sass笔记-3|Sass基础语法之样式复用和保持简洁
上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
- sass笔记-2|Sass基础语法之让样式表更具条理性和可读性
这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...
- 学习Sass笔记之概念篇
1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预 ...
- 项目使用gulp的配置编译sass笔记
Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
随机推荐
- 修改apache的默认www目录
httpd.conf配置文件#DocumentRoot "/var/www/html" //修改前DocumentRoot "/www" #<Direct ...
- 使用Ansible进行项目的自动部署(Tomcat、Weblogic)
原文:https://github.com/x113773/testall/issues/4 问题:Weblogic/Tomcat 通过JAVA直接远程调用或者调用本地Shell还是通过Ansible ...
- [leetcode-566-Reshape the Matrix]
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- TwenLite源码阅读
概要: 这里使用的TweenLite版本是:V1.18.0. TweenLite核心有: EventDispatcher:用个as3的对这个应该不陌生,用来添加事件监听和抛出事件的.不过,js版是阉割 ...
- PhpStorm配置PHP解释器(wampServer版)
PHPStorm(以下简称为PS)和wampServer集成环境安装简单,不再赘述. 本人使用PhpStrom版本为2017.1.4版本. PS刚开始使用会使用自带服务器,但是有几率不能自动匹配到PH ...
- 我的学习之路_第三十章_servlet
servlet:小服务程序 servlet是JavaWeb体系中的三大核心(servlet/Filter/Listener)之一,而且是最主要的那个. 作用:接受请求,处理请求,做出响应 继承体系:s ...
- Interlocked原子函数陷阱
一.问题 windows api函数中提供了InterlockedExchange.InterlockedDecrement, InterlockedIncrement, ExInterlockedA ...
- JavaScript中判断鼠标按键(event.button)
<div id="test"></div> <script> document.oncontextmenu=function(){ return ...
- # .NET切面编程——PostSharp
目录 概念 实现方式 .Net平台的切面实现 PostSharp示例 概念 Aspect-Oriented Programming(AOP):想想OOP是不是有些熟悉,AOP翻译过来的意思就是面向切面 ...
- js模块加载之AMD和CMD
当我写这篇文章的时候,sea.js已经逐渐退出历史的舞台,详细链接.不过任何新事物的出现都是对旧事物的取其精华,去其糟粕,所以了解一下以前模块的加载也是一件好事. js模块化的原因自不比多说,看看HU ...