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 ...
随机推荐
- is not allowed to connect to this MySQL server
解决办法: 这是告诉你没有权限连接指定IP的主机mysql --user=root -p; use mysql; GRANT SELECT,INSERT,UPDATE,DELETE ON host.* ...
- 【LeetCode】332. Reconstruct Itinerary
题目: Given a list of airline tickets represented by pairs of departure and arrival airports [from, to ...
- Ext常用开发基础知识
Ext常用开发基础知识 组件定义 //这种方法可以缓存所需要的组件 调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加 ...
- KBEngine简单RPG-Demo源码解析(1)
一:环境搭建1. 确保已经下载过KBEngine服务端引擎,如果没有下载请先下载 下载服务端源码(KBEngine): https://github.com ...
- Grafana中整个Dashboard报错问题解决
操作Grafana时,有时不小心按了"CTRL+Z",会导致整个Dashboard出错,如下所示: 目前找到一个解决方案,也许不是正路,但是能解决上述问题,如果有了更简单有效的解决 ...
- mybatis学习笔记(四)-- 为实体类定义别名两种方法(基于xml映射)
下面示例在mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现 Demo的基础上进行优化 以新增一个用户为例子,原UserMapper.xml配置如下: < ...
- href 和 src 区别
去网上百度了一下,感觉还是没有清楚的定义,所以自己稍稍的总结了一下: 1 html标签分为行类元素 和块元素 在加空元素(也可以叫做替换元素img input iframe):当元素为替换元素的时候, ...
- 如何通过css设置表格居中
CSS控制整个表格居中,不只是让表格里的文字居中,是整个表格居中1. 不用table的Align="center",要用CSS实现2. 不加<center></c ...
- 使用curl模拟ip和来源进行网站采集的实现方法
对于限制了ip和来源的网站,使用正常的采集方式是不行的.本文将介绍一种方法,使用php的curl类实现模拟ip和来源,实现采集限制ip和来源的网站. 1.设置页面限制ip和来源访问 server.ph ...
- classloader加载的双亲委托模式
要深入了解ClassLoader,首先就要知道ClassLoader是用来干什么的,顾名思义,它就是用来加载Class文件到JVM,以供程序使用 的.我们知道,java程序可以动态加载类定义,而这个动 ...