sass语法练习解析--实例练习

时间:2023-02-06 21:29:44
暂时使用的是:Koala,监测转义
$fff: #ffffff;
$red:red;
h1{
  color: $fff;
}
简单调用
#content{
    color: $fff;
    .con{
      content: $red;
     }
}
或者:
#content,#nei{
   a{
     color: $fff;
    }
}
#content a{color: #fff; }
#nei a{color: #fff; }
嵌套(css里面嵌套要复制什么的,挺麻烦)
#content a{
      color: $fff;
      &:hover{
       color: $red;
      }
}
或者:
#content a{
      color:$fff;
      body.ie &{
        color: $red
      }
}
//当body的class为ie的时候,#content a的颜色为red颜色
&是父级标识符~
article{
~article{border-top: 1px dashed #ccc }
>section{background: #eee }
dl>{
dt{color: #333 }
dd{color: #555 }
}
nav+ & {margin-top: 0 }
}
article ~article{border-top: 1px dashed #ccc  }
article>section{background: #eee }
article dl>dt{color: #333 }
article dl>dd{color: #555  }
nav+article{margin-top: 0 }
nav{
  border:{
    color:$fff;
    style:solid;
    width:1px;
  }
}
编译出来后:nav{ border-style: solid; border-width: 1px; border-color: #ccc;}
还有中嵌套方法:
nav{
        border:red solid 1px {
           left:0px;
           right:0px;
           }
       }
编译出来就是: nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
注:sass的变量是可覆盖的,也就是说可以重复,后面的覆盖前面的
$fancybox-width: 400px !default;
defult相当于css里的!important,不过!defult是应用于变量的,且,其含义是,如果该变量已声明赋值,则无效,否则,就用这个defult的值,也就是设置变量默认值
sass支持局部导入,即是在css规则内导入:例:
  a{
    background:red;
        color:blue;
  }
  上面这个是theme.scss的内容
  .content{
     @import "theme";
   //只有在content这个类内才会使用theme.scss的样式
  } 
  输出结果:
  .content a{
       background:red;
              color:blue;
  }
sass中导入css不会用,

sass中的注释相关:
/*这种注释编译后会显示在css中*/
//这种注释编译后只会显示在scss中而不会显示到css中
body { color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;}
 

混合器
@mixin name{
  border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
}
.btn{
   background:red;
 @include name;
 }
输出为:
.btn{
   background:red;
   border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
 }
这种写法的话好在公用模块,以后调用起来相同样式会很轻松,不过一般是用来处理hack的
还有种技巧是:
@mixin ulPublic{
    color:red;
    li{
        color:blue;
    }
}
ul{
    @include ulPublic;
}
输出是:
ul {
  color: red;
}
ul li {
  color: blue;
}
还有下面这种写法:
@mixin olpublic($defult,$hover,$active ){
    li a{
    color: $defult;
    &:hover {color: $hover};
    &:active  {color: $active };
    }
}
ol{
   @include olpublic(red,yellow,green);
}
输出:
ol li a {
  color: red;
}
ol li a:hover {
  color: yellow;
}
ol li a:active {
  color: green;
}
(感觉有了sass会快捷很多,同时也会增加模块化的概念)
下面的写法是模块化公用:
@mixin module(
   $normal,
   $hover: $normal,
   $link: $normal
)
{
    color: $normal;
    &:hover{color:$hover}
    &:link{color:$link}
}
.module span{
    @include module(yellow);
}
输出为:
.module span {
  color: yellow;
}
.module span:hover {
  color: yellow;
}
.module span:link {
  color: yellow;
}
统一调用
注:混合选择器不仅包含css规则,也包含选择器和选择器中的属性

继承@extend
@mixin name{
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
}
.btn{
      background: $fff;
      color: $fff;
      border: $borderNo;
      @include name;
}
.extend span{
    @extend .btn;
}
会输出:
.btn, .extend span {
  background: #7abbff;
  color: #7abbff;
  border: none;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
继承比较高级的应用:
直接继承元素原生属性。。。(不对,只能继承自己写的)
  注释:最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承