- @import "foo.scss";
- @import "foo";
- // 上两种都会引入 foo.scss文件
-
- @import "foo.css";
- @import "foo" screen;
- @import "
" ; - @import url(foo);
- // 编译为
- @import "foo.css";
- @import "foo" screen;
- @import "
" ; - @import url(foo);
-
- // 可以引人多个文件
- @import "rounded-corners", "text-shadow";
-
- // 有scss或sass文件需要引入,但不希望被编译为css文件,可以在文件名前加一个下划线,就能避免被编译
- // eg. _colors.scss 这样子就不会生成_colors.css文件了.
- @import "colors"; // 不用加下划线
- // 该引入的文件为 _colors.scss;
- // 注意:在同一个目录下不能同时存在带下划线和不带下划线的同名文件. eg. _colors.scss不能与colors.scss并存.
-
- // 嵌套引入
- // example.scss文件中包含
- .example{
- color:red;
- }
- #main{
- @import "example";
- }
- //编译后
- #main .example{
- color:red;
- }
- // 使用@media 可以冒泡到外面
-
- .sidebar {
- width: 300px;
- @media screen and (orientation: landscape) {
- width: 500px;
- }
- }
- // 编译后
- .sidebar {
- width: 300px;
- }
- @media screen and (orientation: landscape) {
- .sidebar {
- width: 500px;
- }
- }
-
- // @media的嵌套
- @media screen {
- .sidebar {
- @media (orientation: landscape) {
- width: 500px;
- }
- }
- }
- // 编译后
- @media screen and (orientation: landscape) {
- .sidebar {
- width: 500px;
- }
- }
-
- // 在@media中可以使用插件#{}
- $media: screen;
- $feature: -webkit-min-device-pixel-ratio;
- $value: 1.5;
-
- @media #{$media} and ($feature: $value) {
- .sidebar {
- width: 500px;
- }
- }
- // 编译后
- @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
- .sidebar {
- width: 500px;
- }
- }
- // @extend 用来扩展选择器或占位符
- .error {
- border: 1px #f00;
- background-color: #fdd;
- }
- .error.intrusion {
- background-image: url("/image/hacked.png");
- }
- .seriousError {
- @extend .error;
- border-width: 3px;
- }
- // 编译后
- .error, .seriousError {
- border: 1px #f00;
- background-color: #fdd;
- }
-
- .error.intrusion, .seriousError.intrusion {
- background-image: url("/image/hacked.png");
- }
-
- .seriousError {
- border-width: 3px;
- }
-
- // @extend可以扩展任意选择器
- .hoverlink {
- @extend a:hover;
- }
- a:hover {
- text-decoration: underline;
- }
- //编译后
- a:hover, .hoverlink {
- text-decoration: underline;
- }
-
- // 多个扩展
- .error {
- border: 1px #f00;
- background-color: #fdd;
- }
- .attention {
- font-size: 3em;
- background-color: #ff0;
- }
- .seriousError {
- @extend .error;
- @extend .attention;
- border-width: 3px;
- }
-
- //编译后
- .error, .seriousError {
- border: 1px #f00;
- background-color: #fdd;
- }
- .attention, .seriousError {
- font-size: 3em;
- background-color: #ff0;
- }
- .seriousError {
- border-width: 3px;
- }
-
- //扩展单一选择器
- #context a%extreme {
- color: blue;
- font-weight: bold;
- font-size: 2em;
- }
- .notice {
- @extend %extreme;
- }
- //编译后
- #context a.notice {
- color: blue;
- font-weight: bold;
- font-size: 2em;
- }
- //@at-root 跳出根元素
- .a {
- color: red;
- .b {
- color: orange;
- .c {
- color: yellow;
- @at-root .d {
- color: green;
- }
- }
- }
- }
- //编译后
- .a {
- color: red;
- }
-
- .a .b {
- color: orange;
- }
-
- .a .b .c {
- color: yellow;
- }
-
- .d {
- color: green;
- }
- //@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了
- //@debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
- @debug 10em+12em;
- //会输出
- //Line 1 DEBUG: 22em;
- @mixin adjust-location($x, $y) {
- @if unitless($x) {//unitless是内置函数,判断数值是否有“单位”
- @warn "Assuming #{$x} to be in pixels";
- $x: 1px * $x;
- }
- @if unitless($y) {
- @warn "Assuming #{$y} to be in pixels";
- $y: 1px * $y;
- }
- position: relative; left: $x; top: $y;
- }
-
- .botton{
- @include adjust-location(20px, 30);
- }
- @mixin error($x){
- @if $x < 10 {
- width: $x * 10px;
- } @else if $x == 10 {
- width: $x;
- } @else {
- @error "你需要将#{$x}值设置在10以内的数";
- }
- }
- .test {
- @include error(15);
- }