![][1]
[笔记代码][6]
scss, css两个目录, 执行命令sass --watch scss:css会监控scss文件修改并编译到css目录Sass有Sass和SCSS两种语法.
Sass语法也叫做缩进语法, 是最初的Sass语法, 不使用任何的括号和分号, 缩进规则非常严格并且是强制的.
Sass 第三版引入了SCSS语法, 在CSS的基础上进行了增强
Sass变量必须以$符号开头, 修改变量值将替换所有使用到这个变量的值. 变量后面的;用于分隔多个变量声明.
变量声明应该放到SCSS文件的开头
$brandBlue: #aaa;
$brandColor: #eee;
body {
color: $brandColor;
}
Mixin是一系列可以服用的CSS声明, 类似于变量.
@mixin指令开头@include指令调用$brandBlue: #333;
$supportGray: #ccc;
@mixin genericContainer {
padding: 10px;
border: $brandBlue 1px solid;
background: $supportGray;
box-shadow: 1px 1px 1px rgba(black, 0.5);
}
.selector-a {
@include genericContainer;
}
通过参数使mixin更加强大. 支持默认参数
$brandBlue: #ddd;
$supportGray: #ccc;
@mixin genericContainer($padding: 8px, $bdColor: orange) {
padding: $padding;
border: $brandBlue 1px solid;
background: $bdColor;
box-shadow: 1px 1px 1px rgba(black, 0.3);
}
.selector-a {
@include genericContainer(10px);
}
.selector-b {
@include genericContainer($bdColor: $brandBlue);
}
像HTML一样嵌套选择器, 生成对应嵌套选择器.
$brandBlue: #ddd;
nav {
ul {
display: flex;
color: $brandBlue;
}
}
partial是一小段SCSS代码, 方便我们实现模块化, 如_variables.scss. partial以下划线开头, .scss为后缀. 下划线告诉编译器不要把文件编译为单独的css.
使用@import指令引入partial, 不需要指定下划线和文件后缀名.
_variables.scss:
$brandBlue: #416e8e;
$brandRed: #c03;
$brandYellow: #c90;
在styles.scss中引入_variables.scss:
@import "variables";
extend允许你直接使用另一个选择器的属性. 通过@extend指令完成.
$brandBlue: #ddd;
.generic-container {
padding: 10px;
border: $brandBlue 1px solid;
}
.box-customer-service {
@extend: .generic-container;
padding: 25px;
}
输出结果:
.generic-container, .box-customer-service {
padding: 10px;
border: #ddd 1px solid;
}
.box-customer-service {
padding: 25px;
}
//注释编译之后不输出到css
/**/注释编译之后输出到css
-moz- Mozilla-o- Opera-ms- Microsoft-webkit- Webkit(Apple)-webkit- ChromeChrome最初使用Webkit内核, 后来改用Blink, 但是还是使用-webkit-
Opera最初使用Presto,然后Webkit,然后Blink
可以使用[Compass][2]处理前缀.
也可以用[-prefix-free][3] 但是都不好.
Autoprefixer根据[can i use][4]数据库信息添加必须的前缀
_mediaqueries.scss
@mixin minw($point) {
@if $point == small {
@media (min-width: 20em) { @content; }
}
@else if $point == medium {
@media (min-width: 40em) { @content; }
}
@else if $point == large {
@media (min-width: 47.5em) { @content; }
}
}
styles.scss
header {
width: 50%;
background: red;
@include minw(640) {
width: 100%;
background: blue;
}
}
styles.css
header {
width: 50%;
background: red;
}
@media (min-width: 40em) {
header {
width: 100%;
background: blue;
}
}
定义media query断点单位为em, 这样不依赖于屏幕density.
<main>可以用来作为包含文档主要内容的容器. 内容必须是唯一的, 不能包含sidebar, navigation, copyright information , site logo, 搜索框, main不会邮箱文档大纲.
<body>
<main class="main-container" role="main">
Content goes here
</main>
</body>
<article>表示文档中一个字包含部分, 可以独立发布或者复用, 如论坛回复, 杂志文章. 每个
<article>中. article不依赖于它所处的位置, 放到任何一个地方都可以自解释<article>可以嵌套在另一个<article>中<body>
<main class="main-container" role="main">
<article class="article-container flex-container">
Content goes here
</article>
</main>
</body>
<section>表示文档中得一个区域, 区域内通常包含自己的标题(h1-h6)
<section>封装一组相关内容.<article>内使用<section><body>
<main class="main-container" role="main">
<article class="article-container flex-container">
<section class="main-content">
<header>
<h1>here is title</h1>
</header>
<p>As per the MDN</p>
<blockquote>
<p>The HTML Main element</p>
</blockquote>
</section>
</article>
</main>
</body>
表示与文档内容无关的内容. 如广告.
<body>
<main class="main-container" role="main">
<article class="article-container flex-container">
<section class="main-content">
</section>
<aside class="side-content" role="complementary">
<h2>What does aaa mean</h2>
<p>hello</p>
</aside>
</article>
</main>
</body>