zoukankan      html  css  js  c++  java
  • sass中@的作用

    总结一下sass中用到@的地方.

    1.继承@extend

    SASS允许一个选择器,继承另一个选择器。比如,现有class1:

    .class1 {
      border: 1px solid #ddd;
    }
    

    class2要继承class1,就要使用@extend命令:

    .class2 {
      @extend .class1;
      font-size:120%;
    }
    

    2.混合@mixin

    sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。

    无参数

    @mixin center-block {
        margin-left:auto;
        margin-right:auto;
    }
    .demo{
        @include center-block;
    }
    

    有参数

    @mixin opacity($opacity:50) {
      opacity: $opacity / 100;
      filter: alpha(opacity=$opacity);
    }
    
    .opacity{
      @include opacity; //参数使用默认值
    }
    .opacity-80{
      @include opacity(80); //传递参数
    }
    

    mixin的实例,用来生成浏览器前缀

    @mixin rounded($vert, $horz, $radius: 10px) {
      border-#{$vert}-#{$horz}-radius: $radius;
      -moz-border-radius-#{$vert}#{$horz}: $radius;
      -webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }
    
    #navbar li { @include rounded(top, left); }
    #footer { @include rounded(top, left, 5px); }
    

    3.插入@import

    @import命令,用来插入外部文件。

    @import "path/filename.scss";
    //如果插入的是.css文件,则等同于css的import命令。
    @import "foo.css";
    

    延伸:css中@import的用法

    1)@import语法结构

    @import + 空格+ url(CSS文件路径地址);

    在html中

    <style type="text/css">
    @import url(CSS文件路径地址);
    </style>

    @import在html中使用截图

    在css中

    直接使用
    @import url(CSS文件路径地址);

    import在CSS代码或CSS文件中使用截图

    4.条件语句@if@else

    @if可以用来判断:

    p {
      @if 1 + 1 == 2 { border: 1px solid; }
      @if 5 < 3 { border: 2px dotted; }
    }
    

    配套的还有@else命令:

    @if lightness($color) > 30% {
      background-color: #000;
    } @else {
      background-color: #fff;
    }
    

    5.循环语句

    SASS支持for循环:

    @for $i from 1 to 10 {
      .border-#{$i} {
        border: #{$i}px solid blue;
      }
    }
    

    也支持while循环:

    $i: 6;
    @while $i > 0 {
      .item-#{$i} {  2em * $i; }
      $i: $i - 2;
    }
    

    each命令,作用与for类似:

    @each $member in a, b, c, d {
      .#{$member} {
        background-image: url("/image/#{$member}.jpg");
      }
    }
    

    6.自定义函数

    @function double($n) {
      @return $n * 2;
    }
    #sidebar {
       double(5px);
    }
    
  • 相关阅读:
    jquery两个滚动条样式
    js双层动画幻灯
    漂浮QQ
    js物理弹性窗口
    js抽奖跑马灯程序
    经典算法
    判断手机浏览器终端设备
    javascript判断手机旋转横屏竖屏
    【转】处理百万级以上的数据提高查询速度的方法
    Linux -- Centos 下配置LNAMP 服务器环境
  • 原文地址:https://www.cnblogs.com/waisonlong/p/7793681.html
Copyright © 2011-2022 走看看