sass和compass实战 读书笔记(一)

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
                                );                        //第二种方式调用
}            
时间: 2024-10-10 17:46:15

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

sass与compass实战(读书笔记)

// compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compile --output-style compressed // compass compile --output-style compressed --force // compass watch // compass模块:reset css3 layout typography utilities

R实战读书笔记四

第三章 图形入门 本章概要 1 创建和保存图形 2 定义符号.线.颜色和坐标轴 3 文本标注 4 掌控图形维数 5 多幅图合在一起 本章所介绍内容概括如下. 一图胜千字,人们从视觉层更易获取和理解信息. 图形工作 R具有非常强大的绘图功能,看下面代码. > attach(mtcars) > plot(wt, mpg) > abline(lm(mpg~wt)) > title("Regression of MPG on Weight") > detach(m

JAVA并发编程实战 读书笔记(二)对象的共享

<java并发编程实战>读书摘要 birdhack 2015年1月2日 对象的共享 JAVA并发编程实战读书笔记 我们已经知道了同步代码块和同步方法可以确保以原子的方式执行操作,但一种常见的误解是,认为关键之synchronized只能用于实现原子性或者确定临界区.同步还有另一个重要的方面:内存可见性. 1.可见性 为了确保多个线程之间对内存写入操作的可见性,必须使用同步机制. 在没有同步的情况下,编译器.处理器以及运行时等都可能对操作的执行顺序进行一些意想不到的调整.在缺乏足够同步的多线程程

[已读]Sass与Compass实战

介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而grunt和FIS貌似都有自己的图片精灵方案(好吧,我都没用过)?所以,这本书也没什么必要看了→ →

Spring3.x企业开发应用实战读书笔记 —— 第三章IoC容器概述

声明:    本篇博客绝大多数内容为<Spring3.x企业开发应用实战>一书原内容,所有版权归原书作者所有!,仅供学习参考,勿作他用! 3.2 相关Java基础知识 Java语言允许通过程序化的方式间接对Class对象实例操作,Class文件由类装载器装在后,在JVM(Java虚拟机)中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息: 如构造函数.属性和方法等.Java允许用户借由这个Class相关的元信息对象间接调用Class对象的功能,这就为使用程

机器学习实战读书笔记(三)决策树

3.1 决策树的构造 优点:计算复杂度不高,输出结果易于理解,对中间值的缺失不敏感,可以处理不相关特征数据. 缺点:可能会产生过度匹配问题. 适用数据类型:数值型和标称型. 一般流程: 1.收集数据 2.准备数据 3.分析数据 4.训练算法 5.测试算法 6.使用算法 3.1.1 信息增益 创建数据集 def createDataSet(): dataSet = [[1, 1, 'yes'], [1, 1, 'yes'], [1, 0, 'no'], [0, 1, 'no'], [0, 1, '

R语言实战读书笔记(二)创建数据集

2.2.2 矩阵 matrix(vector,nrow,ncol,byrow,dimnames,char_vector_rownames,char_vector_colnames) 其中: byrow=TRUE/FALSE,表示按行填充还是按列填充,默认情况下是按列填充 2.2.4 数据框 1.attach,detach()和with() attach():将数据框加入搜索路径 detach():将数据框移除出搜索路径 with():赋值仅在括号内有效,如果想在括号外生效也可以,用<<- 2.

机器学习实战读书笔记(二)k-近邻算法

knn算法: 1.优点:精度高.对异常值不敏感.无数据输入假定 2.缺点:计算复杂度高.空间复杂度高. 3.适用数据范围:数值型和标称型. 一般流程: 1.收集数据 2.准备数据 3.分析数据 4.训练算法:不适用 5.测试算法:计算正确率 6.使用算法:需要输入样本和结构化的输出结果,然后运行k-近邻算法判定输入数据分别属于哪个分类,最后应用对计算出的分类执行后续的处理. 2.1.1 导入数据 operator是排序时要用的 from numpy import * import operato

用node.js 搭建的博客程序心得(node.js实战读书笔记1)

学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一下node,发展得太块了,很多库已经和之前的用法不一样了,就要一直去百度google来查询最新的用法,其实我觉得这样并不见得是一件好事,因为不稳定,所以就不好学习,就要一直保持对于node的关注.不废话了,这篇文章就大概说一些在这章里面所学习到的一些东西,经验总结吧 1.express - 基于 N