sass优势: 不做重复的工作

一  消除样式表冗余(通过变量赋值的方式)

1. 通过变量来复用属性值 

   2. 使用嵌套来快速写出多层级的选择器  

   3. 通过混合器来复用一段样式

   4. 使用选择器继承来避免重复属性

sass通过配置文件config.rb配置文件输出路径

sass基础语法

 变量声明  局部变量和全局变量的概念 css代码块中定义的变量就是局部变量

  $base-border:1px solid #ccc;

  $plain-font:Helvetica、"Microsoft Yahei";

  

  变量可以套用变量

  $heightLight-color: #abcedf;

  $heightLight-border: 1px $heightLight-color solid;

  变量命名使用中划线和下划线的结果相同
    $color_btn:red;
    $color-btn:green;

  button{color: $color_btn;} ----编译结果---- >button{color: green;}   样式被覆盖 结果就是green

  

父选择器

  &

.test{
color:red;
&:hover{
color:green;
}
}
--编译-->
.test{color:red;}
.test:hover{color:green;}

群组选择器的嵌套


.container{
  h1, h2, h3{
    margin-right:5px;
    span{
      color: red;
    }
  }
}

--编译之后---->

.container h1, .container h2, .container h3 {
  margin-right: 5px;
}

.container h1 span, .container h2 span, .container h3 span {

  color: red;
}

 

子组合选择器和同层组合选择器   > + ~

>  选择一个元素的直接子元素  article > section{border:1px solid #ccc;}

+ 同层相邻组合器      header + p{ color: red;}  紧邻header的p标签的color:red;

<header><p>我的字体不是红色的</p></header>
<p>我的字体是红色的</p>
<p>我的字体不是红色的</p>

~ 同层所有选择器   article ~section{border: 1px solid #ccc} 所有跟在article同层之后的section都修饰 在article之前的section不被渲染样式

sass的导入

@import 导入scss文件  可以全局导入和局部导入

//先定一个一个名为_blue-theme的scss局部文件
aside{
background:red;
color:white;
} //另一个文件内部
@import "blue-theme"; // 引用文件可以不带下划线 后缀名 也可以局部引入
div{
@import "blue-theme";
}
--编译生成文件-->
div{
aside{
background:red;
color:white;
}
}

混合器传参

@mixin link-colors($normal, $hover, $visited){
color: $normal;
&:hover{color: $hover;}
&:visited{color: $visited}
} div{
@include link-colors(red,black,white); //第一种方式调用
@include link-colors(
$normal:red,
$hover :black,
$visited:white
); //第二种方式调用
}

sass和compass实战 读书笔记(一)的更多相关文章

  1. sass与compass实战(读书笔记)

    // compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compil ...

  2. 机器学习实战 - 读书笔记(13) - 利用PCA来简化数据

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第13章 - 利用PCA来简化数据. 这里介绍,机器学习中的降维技术,可简化样品数据. ...

  3. 机器学习实战 - 读书笔记(12) - 使用FP-growth算法来高效发现频繁项集

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第12章 - 使用FP-growth算法来高效发现频繁项集. 基本概念 FP-growt ...

  4. 机器学习实战 - 读书笔记(11) - 使用Apriori算法进行关联分析

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第11章 - 使用Apriori算法进行关联分析. 基本概念 关联分析(associat ...

  5. 机器学习实战 - 读书笔记(07) - 利用AdaBoost元算法提高分类性能

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习笔记,这次是第7章 - 利用AdaBoost元算法提高分类性能. 核心思想 在使用某个特定的算法是, ...

  6. iPhone与iPad开发实战读书笔记

    iPhone开发一些读书笔记 手机应用分类1.教育工具2.生活工具3.社交应用4.定位工具5.游戏6.报纸和杂志的阅读器7.移动办公应用8.财经工具9.手机购物应用10.风景区相关应用11.旅游相关的 ...

  7. Spring实战读书笔记

    Spring实战读书笔记 Spring-core Spring之旅 - DI 和 AOP 概念 spring 的Bean容器 spring 的 核心模块 Spring的核心策略 POJO 最小侵入式编 ...

  8. <<Java RESTful Web Service实战>> 读书笔记

    <<Java RESTful Web Service实战>> 读书笔记 第一章   JAX-RS2.0入门 REST (Representational State ransf ...

  9. [已读]Sass与Compass实战

    介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而g ...

随机推荐

  1. 实战开发-》融云tp3.2.3

    1.先去下载sdk 2.我放在的位置如下: 3.之前试了试,怎么引入都不成功,所以我加入了命名空间 还有,我把methods下的所有类都加了命名空间,心里安慰吧. 4.在公共函数写函数,例如 填写自己 ...

  2. 怎样在Win7系统建立并开启Wifi热点

    怎样在Win7系统建立并开启Wifi热点 步骤/方法: 1.首先,确定你的笔记本已经开启了无线. 点击电脑左下角的开始,在搜索程序和文件栏输入cmd. 2.在上图中找到Windows命令处理程序cmd ...

  3. 老版VC++线程池

    在一般的设计中,当需要一个线程时,就创建一个,但是当线程过多时可能会影响系统的整体效率,这个性能的下降主要体现在:当线程过多时在线程间来回切换需要花费时间,而频繁的创建和销毁线程也需要花费额外的机器指 ...

  4. PE解析器的编写(四)——数据目录表的解析

    在PE结构中最重要的就是区块表和数据目录表,上节已经说明了如何解析区块表,下面就是数据目录表,在数据目录表中一般只关心导入表,导出表和资源这几个部分,但是资源实在是太复杂了,而且在一般的病毒木马中也不 ...

  5. MYSQL数据库表按月备份,滚动,保留6次备份

    要求: 每月1日0点:在不影响业务的情况下,备份整月的数据,保留6次备份. 思路: 基于MYSQL事件功能,每月按时完成操作 RENAME语句具有原子性,新旧表无缝切换 RENAME语句仅修改表定义, ...

  6. 优雅的处理Redis访问超时

    很长一段时间以来,一直在项目中使用Redis作为辅助存储,确切来说是利用Redis的内存存储,而不是将其作为缓存.比如常见的利用Set集合来判断某个数值是否存在,或者将来自不同请求的数据放在Redis ...

  7. ETL实践--Spark做数据清洗

    ETL实践--Spark做数据清洗 上篇博客,说的是用hive代替kettle的表关联.是为了提高效率. 本文要说的spark就不光是为了效率的问题. 1.用spark的原因 (如果是一个sql能搞定 ...

  8. 【读书笔记】【深入理解ES6】#12-代理(Proxy)和反射(Reflection)API

    代理(Proxy)是一种可以拦截并改变底层JavaScript引擎操作的包装器,在新语言中通过它暴露内部运作的对象,从而让开发者可以创建内建的对象. 数组问题 在ECMAScript6出现之前,开发者 ...

  9. koa2教程(一)-快速开始

    来自Koa官网对于Koa的简介: koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架. 使用 koa 编写 web 应用,通过组合不同的 async ...

  10. [翻译]QT core wallet manual 狗狗币核心钱包使用教程

    译注:比特币没赶上可以玩狗狗币啊,水电厂包不起可以用CPU挖啊.为了顺应时代潮流,了解一下区(fa)块(heng)链(cai)和加密货币技术,准备从研究狗狗币开始.网上找了一圈没有看到很好的入门级教程 ...