SASS笔记

【SASS笔记】的更多相关文章

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

Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性--脚本特性.Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,Sass中的内置函数(尤其是颜色函数)能帮你自动计算很多东西,sass还有自己一套控制结构语法,能实现循环或者分支,这一切都赋予了sass脚本的特性. 零. 什么是表达式只要能放在属性右边的都是表达式,常见的,表达式是一个简单的值,但表达式也可以包含数学运算符,表达式可以出现在属性或者变量值中的任何地…

Sass 笔记

Sass 笔记 1. 安装,依赖Ruby sass依赖Ruby, 所以Windows要先安装Ruby, Mac自带无需安装 $ gem install sass 2. 两种文件格式 sass scss .sass : 它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性, 容易阅读书写更快 .scss : CSS3 语法写法相同二者可互相转换: $ sass-convert style.sass style.scss 3. 缓存提升重新编译的速…

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

Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sass的设计思维--Don't Repeat Yourself.这一篇将阐述Sass如何利用变量.选择器嵌套.混合器和选择器继承来帮我们又快又好地搞定CSS. 零. Sass的作用是什么? Sass的作用是,帮助我们更快地(又快)写出具有高可维护性(又好)的CSS代码. 直白点说就是,用了sass,写…

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

上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定要注意什么时候该用什么. 零. 混合器--样式层上复用当你需要一直复用大段样式的时候,可以考虑下混合器. 1. 基本用法混合器使用@mixin标识符定义,然后通过@include引入,简单的说就是用@mixin定义一个混合器,它具有一个名字和一堆包含在花括号中的规则,用@include引入这个混…

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

这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后无忧. 1.变量声明变量用"$"符号开头进行声明,任何可以用作CSS属性值的东西都可以用作sass变量的值,单个值.空格分开的多个值.逗号分开的多个值都可以: $primary-color: #233; $general-border: 1px solid #ddd; 变量一般声明在sa…

学习Sass笔记之概念篇

1 什么是CSS预处理器首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量.简单的逻辑程序.函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处. 2 什么是Sas…

前端开发离不开三剑客:html.Javascript.css. html:主要进行网页内容的开发语言: JavaScript: 主要对页面业务逻辑的开发语言: css:主要对网页外观样式进行注解的文本: 没错就是文本,css仅仅是一种文件格式,而非编程语言,那么有没有一种对网页样式进行编程的语言那,答案是肯定的,比如本篇文章的主角SASS,还有另外两种比较常用的css预处理器(框架)Less CSS.Stylus. 1. CSS预处理器的必要性 css主要对页面的DOM元素进行样式的设定,虽然某…