Sass常用写法
Sass使用变量,变量以$开头
$bgcolor:#f40; background-color:$bgcolor;
如果变量需要嵌套在字符串当中,就需要写在#{}之中
$direction:left; border-#{$direction}-radius:10px;
计算、嵌套、属性嵌套 这三个可以从字面上理解,最后一个嵌套属性举个栗子
div{a:hover{color:red;}}
继承 @extend class2继承class1的属性
.class1{background-color:pink;} .class2{@extend .class1;font-size:24px;}
选择符&
a {color: orange; &:hover {color: darken(orange,5%);}
与之对应的是脱离父级继承 @at-root
div{@at-root a{color:red;}} 编译成css后不是 div a{color:red;} 而是a{color:red;}
编写可以重用的代码块 @mixin 使用@include命令,调用
@mixin left{float:left;clear:both;} div{@include left;} 更重要的是他可以传入参数-例如: @mixin left($value:10px){float:left;margin-left:$value} div{$include left(50px)}
颜色函数
变暗background-color:darken(#cc3, 10%) 变亮background-color:lighten(#cc3, 10%)
函数传值计算rem
@function rem($value){ @return $value/$fsz*1rem; }之后要计算rem就直接在rem()括号中传入设置参数即可自动计算rem
插入文件 @import
可以在.scss文件中以@import ‘demo’ 形式引入外部sass样式文件 还可以带路径 @import "path/a.scss";
条件语句
@if可以用来判断: p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } } 配套的还有@else命令: @if lightness($color) > 30% { } @else { background-color: #fff; }
Sass常用写法的更多相关文章
- 转--Android按钮单击事件的四种常用写法总结
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的 ...
- 【Android】按钮点击事件的常用写法
学习总结: 最近学习了Android点击事件的常用写法.点击事件会触发监听对象身上的回调,常用写法有以下四种: 方法一:使用匿名内部类. public class MainActivity exten ...
- MyBatis 常用写法
MyBatis 常用写法 1.forEach 循环 forEach 元素的属性主要有 item, idnex, collection, open, separator, close. collec ...
- jquery常用写法简单记录
好久不写东西了......话不多说,主要记录一下,最近做的项目中用到的js的记录(虽然特别特别简单) 一 jquery常用写法记录 jQuery(this).addClass("select ...
- Android按钮单击事件的四种常用写法
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...
- angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法
壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...
- python time和datetime常用写法格式
python 的time和datetime常用写法 import time from datetime import datetime from datetime import timedelta # ...
- mongodb java操作常用写法
MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON 对象.字段值可以包含其他文档,数组及文档数组.下面介绍的是用java操作 ...
- JS中面向对象中的继承(常用写法)---核心部分
1.基本概念 子类继承父类,但是不能影响父类.包括1.混合继承(构造函数+原型) 2.ES6新增class的继承. 接下来介绍,面向对象中继承的两种常用写法.即混合继承(构造函数+原型)和class继 ...
随机推荐
- 【JS】自学
JS自学网址: http://www.runoob.com/js/js-tutorial.html
- 《深入理解Android内核设计思想》已陆续在全国各大书店及网上书店上市,感谢大家一直以来的支持~~
<深入理解Android内核设计思想>已陆续在全国各大书店上市,电子书店也在陆续上架中(不断添加): 1. China-Pub 2. 京东 3. s=books&ie=UTF8&a ...
- golang语言调试
https://software.intel.com/en-us/blogs/2014/05/10/debugging-performance-issues-in-go-programs https: ...
- HDU1712:ACboy needs your help(分组背包模板)
http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem Description ACboy has N courses this term, an ...
- Selenium+Java元素定位之二
//通过完全匹配链接来定位 driver.findElement(By.linkText("新闻")).click(); //通过部分匹配链接来定位 driver.findElem ...
- liferay中数据库表的解析未完
页面布局 1:表layout 主要的字段有: 字段 privateLayout 0表示的是公开的页面 字段 layoutId 如果在同一个社区中有很多的界面,layoutId表示各个界面,按照顺序排列 ...
- 兼容安卓和ios实现一键复制内容到剪切板
实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Node.js最新技术栈之Promise篇
前言 大家好,我是桑世龙,github和cnodejs上的i5ting,目前在天津创业,公司目前使用技术主要是nodejs,算所谓的MEAN(mongodb + express + angular + ...
- 原 用Tomcat服务器配置https双向认证过程实战
什么是https? 百度百科足够解释它:http://baike.baidu.com/view/14121.htm 工具:keytool (Windows下路径:%JAVA_HOME%/bin/key ...
- HTTP从入门到入土(5)——HTTP报文格式
HTTP报文格式 HTTP报文分为请求报文和响应报文,只有发送了请求报文,才会有响应报文. 常见的报文格式如下所示: