sass和compass学习笔记

学习sass和compass做成的思维导图：

以下是补充：

1、对比起混合器，使用继承生成的css代码体积会更小，因为只是重复了选择器

2、.scss（使用大括号)和.sass(使用缩进）可以在同一个项目中使用，但不能在同个文件使用

3、原生css@import会降低性能，必须先把引用文件下载才能渲染

4、sass是css的超集，支持css的所有用法，compass是sass的工具库

5、类名一定要有语义化作用，而不是视觉化的表现，比如错误提示，类名应该使用.error而不是.red

6、可以使用%用来构建只用来继承的选择器

7、sass中@media query可以内嵌在css规则中，在生成css的时候，media query才会被提升到样式最高层次，避免了重复书写选择器以及打乱样式表

8、浏览器解析css是将从右到左解析的，嵌套使样式渲染低效，增加了样式修饰的权重，制造了样式位置依赖。sass中使用at-root指明输出位置

9、sass中具备@each，@if，@for等循环控制器，可实现校验等功能

10、在config.rb中修改output_style指定编译方式

11、当output_style=:compressed时注释会被去掉，如果想要保留某个注释可加个！（/*！...*/）

sass和compass学习笔记相关推荐

compass reset和layout [Sass和compass学习笔记]
reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大通过重置样式可以让样式的浏览器兼容更简单使用方法简单 @import "compass/reset ...
【Sass】全面的 Sass 教程及学习笔记
文章目录 Sass 安装教程 `npm` 安装 Sass 变量存储数据 Sass 嵌套 CSS Mixins 创建可重用 CSS @if 和 @else 为样式添加逻辑 @for 创建一个 Sass ...
【Sass】+【Compass】学习笔记
这两天一直在学习sass和compass,看完了一些教程后决定做一些实践操作,权当笔记记录一下. COMPASS:compass-style.org 安装compass:gem install com ...
关于Sass与Compass的一些笔记
1. 安装: Sass和Compass都是基于Ruby编程语言的命令行工具.要使用它们,你首先需要在电脑中安Ruby,并对电脑的命令行操作有一个基本的理解.Sass和Compass可以安装在Windo ...
css预处理器（less学习笔记）
什么是css预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作 ...
【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
vue 使用了浏览器的刷新之后报错_Laravel 7 + vue.js 学习笔记（一）
laravel laravel是php为底层所写的框架,和大多数的开源框架一样使用了mvc模式,在使用的时候使用了一些编程语言的高级特性,如:解决类与类之间依赖的问题引入了依赖注入(DI),管理多个类 ...
Scss、elementUI引入、transition动画 - 学习笔记
文章目录 Scss.elementUI引入.transition动画 - 学习笔记 Sass 是什么? elementUI transition动画 Scss.elementUI引入.transiti ...
webpack学习笔记1
webpack学习笔记1:基本概念前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
JavaScript学习笔记：数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...

sass和compass学习笔记

sass和compass学习笔记

sass和compass学习笔记相关推荐

最新文章

热门文章