sass学习总结
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。个人简单总结了下比较常用的的一些东西。
$ 开头定义变量名 是个全局变量 在{ $name } 局部变量
&代表父级 a{ &:hover{} } a{} a:hover{}
.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 群组
.a,.b{ a{}} .a a,.b a{} 群组
.a{ border : { style:solid;width:1px;color:#ccc } } 属性嵌套 ‘:’ 必写
@at-root 在嵌套里标记用的 生成出来css是独立的 跳出嵌套
_aa.scss 一般为 局部文件 其实 @import 引入的时候 _可以不写
$aa:10 !default !default设置默认值
@mixin 混合器 @include 调用
布尔值 and(与)\or(或)\not(非)
comparable($numver-1,$numver-2) 判断是否能相加 返回 布尔值 true/false
unit($numver) 判断 $numver 的单位
unitless($numver) 判断数值是否有单位 返回布尔值 没有单位是 true 反之 false
type-of($value) 返回类型 类似于js typeof
@function @return 必须要有返回值
#{...} 插值
@for $i from 1 to 5 \ @for $i from 1 through 5 前者是到4不到5 后者循环到5
@for $i from $strat through $end 开始结束如果是 strat 大就从小到大 反之亦然
@if 判断条件{}@else{} 判断
@include a($a:10,$b:20) 可以传类似于json的值
sass学习总结的更多相关文章
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- Sass学习第一天
Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- sass学习笔记1
less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...
- sass学习(2)——关于变量
定义一个sass变量 可以说,变量是一个编程语言的基础.所以对于sass来说,变量肯定是浓墨重彩的其中一笔,当然函数也是.那我们如何声明定义一个sass的变量呢? 变量的符号$ 变量名称 变量的值 那 ...
- sass学习(1)——了解sass
为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一 ...
- sass 学习
本来看了阮一峰和于江水两位老师的博客,有看了ionic自带的sass文件,原以为自己已经是很熟悉,精通了.可是我居然连ruby都不知道真实惭愧啊,辛亏看了www.sass.hk 我想这篇官方文档肯定 ...
- 菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
- SASS学习笔记!(持续学习中..)
工具 : koala 学习网址 : http://www.w3cplus.com/sassguide/syntax.html http://sass-lang.com/documentation/ ...
随机推荐
- 泛型T的类型获取
T.getClass()或者T.class都是非法的,因为T是泛型变量. 由于一个类的类型是什么是在编译期处理的,故不能在运行时直接在Base里得到T的实际类型. /** * 可以在service层直 ...
- STL string的构造函数
前几天在网上,一位网友问我几个问题如下: , 'A'); string S1 = "abcdefg"; , ); ); cout << "s0 = " ...
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- 工作记录 java
1:tomcat有两个这个文件,是缓存文件和临时文件.可能会缓存部分的jsp文件,所以如果有时候文件重新替换不起效果的话,可以先把这两个文件夹下面的文件清空
- Delphi的三目运算 ifthen 和iif
system.Math和system.StrUtils都有IfThen方法, 返回字符串和 返回 数值型 system.Math.IfThen(vehicle.MILE=0,0,StrToFloat( ...
- js/jQuery使用过程中常见问题
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
- 使用MonkeyTest对Android客户端进展压力测试
Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行压力测试. 先来看一条 ...
- 2015 ACM/ICPC EC-Final
A. Boxes and Balls 二分找到最大的不超过$n$的$\frac{x(x+1)}{2}$形式的数即可. #include <bits/stdc++.h> using name ...
- 诡异的localhost无法连接
上午试了localhost发现提示无法连接,ping了下localhost,能够ping通. 重启了Apache,还是无法解决. 试着停止了Apache服务,然后再连接localhost,发现浏览器提 ...
- DOM性能瓶颈与Javascript性能优化
这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...