sass03 变量、样式导入

最新推荐文章于 2025-03-09 21:49:27 发布

转载最新推荐文章于 2025-03-09 21:49:27 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaowen/p/6998339.html

本文介绍SCSS中变量及导入功能的使用方法，并通过示例展示了如何在实际项目中运用这些特性。包括变量覆盖、多值变量、全局变量设置等技巧。

demo1.scss

@import "css.css";    //导入css文件
@import "http://ss/xx";    //导入css文件
@import url(css.css);    //导入css文件
@import "a.scss";    //导入scss文件

$fontsize:14px ;
$fontsize:12px !default;//变量后面的值会覆盖前面的值，默认值

$paddings: 5px 10px 5px 10px;//多值变量

$maps: (color:red,borderColor:blue);//多值变量

$className:main;//特殊变量
$text-info:lightgreen;//特殊变量

body{
    $color:red !global; //定义全局变量，以便后面的footer可以访问到，
    color:$color;
    font-size:$fontsize;
    padding:$paddings;
    padding-left:nth($paddings, 2);//下标从1开始
    
}
footer{
    color:$color;
    background-color:map-get($maps,borderColor);
}
.#{$className}{//使用main变量
    width:50px;
}

.text-info{
    color:$text-info;
}

编译后的demo1.css

@import url(css.css);
@import "http://ss/xx";
@import url(css.css);        //导入css文件原样输出
head {              //导入scss文件，会把scss文件的代码编译出来
  width: 100px; }

body {
  color: red;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  padding-left: 10px; }

footer {
  color: red;
  background-color: blue; }

.main {
  width: 50px; }

.text-info {
  color: lightgreen; }

/*# sourceMappingURL=demo1.css.map */