最近公司开发的h5项目,需要用到sass,所以领导推荐让我去阮一峰大神的SASS用法指南博客学习,为方便以后自己使用,所以在此记录。

一、代码的重用

  1、继承:SASS允许一个选择器,继承另一个选择器。

    class2要继承class1,就要使用@extend命令:

.class1 {
    border: 1px solid #ddd;
}
.class2 {
    @extend .class1;
    font-size:120%;
}

  2、Mixin:Mixin有点像C语言的宏(macro),是可以重用的代码块。

    使用@mixin命令,定义一个代码块。使用@include命令,调用这个mixin。

  @mixin left {
    float: left;
    margin-left: 10px;
  }
  div {
    @include left;
  }

    mixin的强大之处,在于可以指定参数和缺省值。使用的时候,根据需要加入参数:

   @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }
  div {
    @include left(20px);
  }

  3、颜色函数

  SASS提供了一些内置的颜色函数,以便生成系列颜色。

   lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

  4、插入文件

  @import命令,用来插入外部文件

@import "path/filename.scss";

二、高级用法

1、条件语句:

  @if可以用来判断

   p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }

  配套的还有@else命令:

    @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

2、循环语句

  for循环:

 @for $i from  to  {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

  while循环:

 $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

  each命令,作用与for类似:

 @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

3、自定义函数

  SASS允许用户编写自己的函数。

 @function double($n) {
    @return $n * 2;
  }
  #sidebar {
    width: double(5px);
  }

sass 常用用法笔记的更多相关文章

  1. Linux常用命令 笔记

     Linux常用命令  笔记 一.文件处理命令 1. ls命令:显示目录文件                          -a 显示所有文件,包括隐藏文件.(all)               ...

  2. STL之vector常用函数笔记

    STL之vector常用函数笔记 学会一些常用的vector就足够去刷acm的题了 ps:for(auto x:b) cout<<x<<" ";是基于范围的 ...

  3. centos的vi常用用法

    centos的vi常用用法 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的 ...

  4. MySql与SqlServer的一些常用用法的差别

    MySql与SqlServer的一些常用用法的差别 本文为转载 本文将主要列出MySql与SqlServer不同的地方,且以常用的存储过程的相关内容为主. 1. 标识符限定符 SqlServer [] ...

  5. Linux 常用命令笔记

    Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...

  6. [转]ssh常用用法小结

    ssh常用用法小结 1.连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以上两种方式都可以远程登录到远程主机, ...

  7. jquery中关于append()的用法笔记---append()节点移动与复制之说

    jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...

  8. 【三支火把】---一份程序看懂C程序printf()的几种常用用法

    闲来继续巩固我的学习之路,今天略微整理了一下,C程序中Printf()的一些常用用法,虽然自己以前好像会,但是不够系统,今天大致整理了一些,先贴上来看看,以后在看到其他,继续补充,希望能帮到一些像我一 ...

  9. grep参数说明及常用用法

    grep参数说明及常用用法 趁着午休的时间把自己经常使用的一些grep命令整理一下. 方便以后查看. 后续会逐步把awk/sed/find等常用的命令理一理. 增强下记忆. 也算是对得起自己了. ^^ ...

随机推荐

  1. BootLoader与Linux内核的参数传递【转】

    本文转载自:http://blog.sina.com.cn/s/blog_476d8cf30100rttx.html 在嵌入式系统中,BootLoader 是用来初始化硬件,加载内核,传递参数.因为嵌 ...

  2. SDUT 3035 你猜我猜不猜你猜不猜(字符串 规律性)

    你猜我猜不猜你猜不猜 Time Limit: 2000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 In the past 39th annual ACM in ...

  3. 用于JS日期格式化,以及简单运算的Date包装工具类

    1. [文件] yDate.js/** * | yDate.js | Copyright (c) 2013 yao.yl | email: redrainyi@126.com | Date: 2012 ...

  4. poj 1325 Machine Schedule 解题报告

    题目链接:http://poj.org/problem?id=1325 题目意思:有 k 个作业,机器A有 n 个模式:0 ~ n-1,机器B 有 m 个模式:0~ m-1.每一个作业能运行在 A 的 ...

  5. dba操作之archivelog清理

    下面的命令用于校验归档日志的有效性,列出无效的归档日志,以及以何种方式清除归档日志,列出几种常用的: crosscheck archivelog all;                        ...

  6. IOS中延时执行方式

    本文列举了四种延时执行某函数的方法及其一些区别.假如延时1秒时间执行下面的方法. - (void)delayMethod { NSLog(@"execute"); } 1.perf ...

  7. 扩展KMP(占位)

    先放代码. #include<cstdio> #include<iostream> #include<cstring> using namespace std; ; ...

  8. Bootstrap-CSS:辅助类

    ylbtech-Bootstrap-CSS:辅助类 1.返回顶部 1. Bootstrap 辅助类 本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本 ...

  9. 分区时"磁盘上没有足够的空间完成此操作"的解决方法

    在新的预装windows 7的品牌机上,工作人员一般将磁盘分为C.D两个分区.但往往造成C盘有很大一部分的空间没办法分出来,而分出来的部分空间又不能和后面的磁盘合并,甚至出现无法新建简单卷的操作,即点 ...

  10. ASP.NET Core 依赖注入(DI)

    ASP.NET Core的底层设计支持和使用依赖注入.ASP.NET Core 应用程序可以利用内置的框架服务将服务注入到启动类的方法中,并且应用程序服务也可以配置注入.由ASP.NET Core 提 ...