前端开发离不开三剑客: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. python selenium-webdriver 通过cookie登陆(十一)

    上节介绍了浏览器的常用方法,涉及到了cookie的使用,本节介绍一下如何利用cookie进行登陆系统,这里使用到了request模块,我们首先利用request模块,请求登陆地址进行登陆,登陆成功以后 ...

  2. 常用PHP函数的封装

    PHP获取文件扩展名(后缀) function getExtension($filename){ $myext = substr($filename, strrpos($filename, '.')) ...

  3. Linux之用户管理--初级上

    管理用户命令汇总 命令 注释说明(特殊颜色的必须掌握) useradd增 同adduser命令,执行此命令可在系统中添加用户.(更改4个用户文件) userdel删 执行此命令可删除用户及相关用户的配 ...

  4. Linux之正则表达式

    正则表达式与通配符的区别: 最常应用正则表达式的命令是grep(egrep),sed,awk. 正则表达式和通配符有本质区别,正则表达式用来找:[文件]内容,文本,字符串.一般只有三剑客支持.通配符用 ...

  5. VMware中Mac OS中显示共享文件夹的方法

    在finder 偏好设置里的通用标签下,勾选  “已连接的服务器”

  6. 网络编程学习笔记(二)基于TCP的Socket编程

    1.Socket:英文意思插座.两个Java应用程序可以通过一个双向的网络通信连接实现数据交换,这个双向链路的一端称为一个Socket. 2.Socket通常用来实现client-server(客户端 ...

  7. Linux下进行硬盘挂载、分区、删除分区,格式化,卸载方法

    本文简单介绍了下文件系统及其操作(df命令),磁盘分区.格式化,还有最主要是挂载操作. 在这里对"挂载"做个说明,我们都知道文件系统是创建在磁盘上面的,每个文件系统都有独立的ino ...

  8. Unity3D-游戏中的技能碰撞检测

    在游戏战斗中,我们会用到各种各样的碰撞检测,来判断是否打中了目标 比如扇形检测/圆形检测 还有矩形检测,王者荣耀里后羿的大招就是一个很长的矩形碰撞体 这些在Unity3D引擎中其实都封装好了一些Col ...

  9. Java IO设计模式(装饰模式与适配器模式)

    01. 装饰模式 1. 定义 Decorator装饰器,就是动态地给一个对象添加一些额外的职责,动态扩展,和下面继承(静态扩展)的比较.因此,装饰器模式具有如下的特征: 它必须持有一个被装饰的对象(作 ...

  10. Struts 框架 之 文件上传下载案例

    Struts 框架 文件上传 1. 先准备 Struts 环境 (我使用的是struts 2.3.4版本) 导jar包: