前端开发离不开三剑客:html、Javascript、css.

  1. html:主要进行网页内容的开发语言
  2. JavaScript: 主要对页面业务逻辑的开发语言
  3. css:主要对网页外观样式进行注解的文本

没错就是文本,css仅仅是一种文件格式,而非编程语言,那么有没有一种对网页样式进行编程的语言那,答案是肯定的,比如本篇文章的主角SASS,还有另外两种比较常用的css预处理器(框架)Less CSS、Stylus。

1. CSS预处理器的必要性

 css主要对页面的DOM元素进行样式的设定,虽然某些样式也可以继承,比如font-size、opacity,CSS也提供了各种选择器,

其本质都是围绕DOM元素进行样式设定的,随着前端项目工程越来越大,样式文件的冗余性、可维护性带来的副作用也越发显得重要;

比如情景一,你的项目中定义了一个基本颜色,有上万处的不同元素运用了改样式,突然某天产品要求网站更新风格,换了一种色值,如何实现?

  1. 全局搜索该色值,将其替换为新的色值;
  2. 定义一个样式类,更改该样式类的色值,在每一处进行需要更改的DOM元素上添加该样式;

再比如情景二,你的项目多处引用了一个相似的border样式,仅仅是border的线宽不一样,如何实现?

  1. 定义多个样式类,每个样式类引用一种线宽;

不用css预处理器,我们同样可以满足产品的各种花式需求,仅仅是工作量大了一些,仅仅是重复的多写几行乃至几千行代码而已,仅此而已!!!

试想一下,加入我们的色值可以采用一个变量,只需要轻轻改变这个色值变量的值就可以满足场景一的需求;假如我们可以像编写JS代码一样写一个可输入变量的程序,

就可以满足产品设计场景二的需求,即便他有成千上万的线宽,你需要做的仅仅是更改一个变量即可;

是的,CSS预处理器已经完全为我们实现了,这就是CSS预处理器存在的意义

2. SASS主要特性

 CSS预处理器是一种语言,任何一种css预处理器都完全兼容css,它可以为CSS增加一些编程特性,无需考虑浏览器兼容性问题,让你在CSS中使用变量、简单的逻辑程序、函数等其他的一些功能,请不要停留在石器时代了,开启css编程的新起点吧;

2.1. sass提供四中可选的编程风格

  1. nested:嵌套缩进的css代码; ————默认风格
  2. expanded:没有缩进,扩展的css代码;
  3. compact :简介格式的css代码;
  4. compressed:压缩后的css代码;————生产环境使用

    2.2. SASS主要功能

    包括:变量支持、嵌套、混入(mixin)、继承、导入、函数、操作符

SASS笔记的更多相关文章

  1. sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它

    Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性--脚本特性.Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,Sa ...

  2. Sass 笔记

    Sass 笔记 1. 安装,依赖Ruby sass依赖Ruby, 所以Windows要先安装Ruby, Mac自带无需安装 $ gem install sass 2. 两种文件格式 sass scss ...

  3. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  4. sass笔记-3|Sass基础语法之样式复用和保持简洁

    上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...

  5. sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

    这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...

  6. 学习Sass笔记之概念篇

    1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预 ...

  7. 项目使用gulp的配置编译sass笔记

    Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...

  8. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  9. Sass学习笔记(补充)

    阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...

随机推荐

  1. is not allowed to connect to this MySQL server

    解决办法: 这是告诉你没有权限连接指定IP的主机mysql --user=root -p; use mysql; GRANT SELECT,INSERT,UPDATE,DELETE ON host.* ...

  2. 【LeetCode】332. Reconstruct Itinerary

    题目: Given a list of airline tickets represented by pairs of departure and arrival airports [from, to ...

  3. Ext常用开发基础知识

    Ext常用开发基础知识 组件定义 //这种方法可以缓存所需要的组件 调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加 ...

  4. KBEngine简单RPG-Demo源码解析(1)

    一:环境搭建1. 确保已经下载过KBEngine服务端引擎,如果没有下载请先下载          下载服务端源码(KBEngine):              https://github.com ...

  5. Grafana中整个Dashboard报错问题解决

    操作Grafana时,有时不小心按了"CTRL+Z",会导致整个Dashboard出错,如下所示: 目前找到一个解决方案,也许不是正路,但是能解决上述问题,如果有了更简单有效的解决 ...

  6. mybatis学习笔记(四)-- 为实体类定义别名两种方法(基于xml映射)

    下面示例在mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现 Demo的基础上进行优化 以新增一个用户为例子,原UserMapper.xml配置如下: < ...

  7. href 和 src 区别

    去网上百度了一下,感觉还是没有清楚的定义,所以自己稍稍的总结了一下: 1 html标签分为行类元素 和块元素 在加空元素(也可以叫做替换元素img input iframe):当元素为替换元素的时候, ...

  8. 如何通过css设置表格居中

    CSS控制整个表格居中,不只是让表格里的文字居中,是整个表格居中1. 不用table的Align="center",要用CSS实现2. 不加<center></c ...

  9. 使用curl模拟ip和来源进行网站采集的实现方法

    对于限制了ip和来源的网站,使用正常的采集方式是不行的.本文将介绍一种方法,使用php的curl类实现模拟ip和来源,实现采集限制ip和来源的网站. 1.设置页面限制ip和来源访问 server.ph ...

  10. classloader加载的双亲委托模式

    要深入了解ClassLoader,首先就要知道ClassLoader是用来干什么的,顾名思义,它就是用来加载Class文件到JVM,以供程序使用 的.我们知道,java程序可以动态加载类定义,而这个动 ...