scss学习笔记

sass为后缀的文件:写的时候不带大括号和分号;

例子:body

    font-size:12px

scss为后缀的文件:和css一样写的时候带大括号和分号;

导入:

  sass的导入(@import)规则和css的有所不同,编译时会将@import的scss文件合并进来只生成一个css文件。但是如果你在sass文件中导入css文件如@import ‘reset.css‘,那效果跟普通的css导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import ‘mixin‘

注释:

  /**/:多行注释

  //:单行注释,在转义成css的时候不会被转义出来

变量:$fontS:12px !default;(!default表示默认值,不是可以不写)

时间: 2024-12-29 12:03:02

scss学习笔记的相关文章

scss 学习笔记

由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } >>>>>>>>>>>>>>>>>>>> #main p { color: #00

Sass学习笔记(补充)

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass个人学习笔记

Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3cplus.com/sassguide/ 个人先看了 <Sass与Compass实战>(Materliu 是中文翻译之一)后看的视频,看书的时候不是很了解看了视频之后又看了一遍书终于少许了解sass了 下面是我个人对<Sass与Compass实战>这本书学习笔记总结,有些是个人极端自我

Ionic2学习笔记(6):NAVIGATION

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html ? ? ? ?Ionic2中创建一个页面很方便,在页面之间相互切换也很方便,我们在实现如下需求: 在主页面创建一个按钮,点击按钮,跳转到一个新页面,在跳转过程中,我们可以也可以在页面之间传递数据. 进入项目目录:cd MyFirstApp 创建一个新页面: ionic g page SecondPage 将@import "../pages/second-page/secon

webpack学习笔记

webpack笔记 webpack学习笔记 1.全局安装 npm install webpack -g 2.作为项目依赖安装 npm install webpack --save-dev 3.安装css-loader.sass-loader.node-scss npm install css-loader sass-loader node-scss --save-dev 4.webpack配置 // webpack.config.js var path = require('path'); mo

Sass与Compass 学习笔记

Sass与Compass 学习笔记 安装: 1.装sass之前先确认装了ruby ; 2.命令gem install sass *注一般不能正常安装 由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败.这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main