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

 $fsz:50;
@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常用写法的更多相关文章

  1. 转--Android按钮单击事件的四种常用写法总结

    这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下     很多学习Android程序设计的人都会发现每个人对代码的 ...

  2. 【Android】按钮点击事件的常用写法

    学习总结: 最近学习了Android点击事件的常用写法.点击事件会触发监听对象身上的回调,常用写法有以下四种: 方法一:使用匿名内部类. public class MainActivity exten ...

  3. MyBatis 常用写法

    MyBatis 常用写法 1.forEach 循环   forEach 元素的属性主要有 item, idnex, collection, open, separator, close. collec ...

  4. jquery常用写法简单记录

    好久不写东西了......话不多说,主要记录一下,最近做的项目中用到的js的记录(虽然特别特别简单) 一 jquery常用写法记录 jQuery(this).addClass("select ...

  5. Android按钮单击事件的四种常用写法

    这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...

  6. angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法

     壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...

  7. python time和datetime常用写法格式

    python 的time和datetime常用写法 import time from datetime import datetime from datetime import timedelta # ...

  8. mongodb java操作常用写法

    MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON 对象.字段值可以包含其他文档,数组及文档数组.下面介绍的是用java操作 ...

  9. JS中面向对象中的继承(常用写法)---核心部分

    1.基本概念 子类继承父类,但是不能影响父类.包括1.混合继承(构造函数+原型) 2.ES6新增class的继承. 接下来介绍,面向对象中继承的两种常用写法.即混合继承(构造函数+原型)和class继 ...

随机推荐

  1. 【JS】自学

    JS自学网址: http://www.runoob.com/js/js-tutorial.html

  2. 《深入理解Android内核设计思想》已陆续在全国各大书店及网上书店上市,感谢大家一直以来的支持~~

    <深入理解Android内核设计思想>已陆续在全国各大书店上市,电子书店也在陆续上架中(不断添加): 1. China-Pub 2. 京东 3. s=books&ie=UTF8&a ...

  3. golang语言调试

    https://software.intel.com/en-us/blogs/2014/05/10/debugging-performance-issues-in-go-programs https: ...

  4. HDU1712:ACboy needs your help(分组背包模板)

    http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem Description ACboy has N courses this term, an ...

  5. Selenium+Java元素定位之二

    //通过完全匹配链接来定位 driver.findElement(By.linkText("新闻")).click(); //通过部分匹配链接来定位 driver.findElem ...

  6. liferay中数据库表的解析未完

    页面布局 1:表layout 主要的字段有: 字段 privateLayout 0表示的是公开的页面 字段 layoutId 如果在同一个社区中有很多的界面,layoutId表示各个界面,按照顺序排列 ...

  7. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  8. Node.js最新技术栈之Promise篇

    前言 大家好,我是桑世龙,github和cnodejs上的i5ting,目前在天津创业,公司目前使用技术主要是nodejs,算所谓的MEAN(mongodb + express + angular + ...

  9. 原 用Tomcat服务器配置https双向认证过程实战

    什么是https? 百度百科足够解释它:http://baike.baidu.com/view/14121.htm 工具:keytool (Windows下路径:%JAVA_HOME%/bin/key ...

  10. HTTP从入门到入土(5)——HTTP报文格式

    HTTP报文格式 HTTP报文分为请求报文和响应报文,只有发送了请求报文,才会有响应报文. 常见的报文格式如下所示: