scss

最新推荐文章于 2024-08-28 16:52:17 发布

fighting_12

最新推荐文章于 2024-08-28 16:52:17 发布

阅读量632

点赞数

分类专栏： web前台文章标签： include float windows import ruby linux

web前台专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了SCSS在不同环境下的安装方法，并通过多个示例展示了其嵌套使用、特殊字符&的运用、变量的应用、mixin的定义与引用、mixin参数化以及@include的使用等特性。此外，还探讨了SCSS中#{}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scss调查：
一、使用环境：Windows 用户可以通过Windows安装程序来安装,Linux可以通过包管理(apt-get)来安装,安装Ruby之后，才能按照Sass。
二、特点：
1.嵌套使用:
   style.scss ：#navbar {width: 80%;
           height: 23px;
           ul { list-style-type: none; }
           li { float: left;
                a { font-weight: bold; }
           }
          }
   style.css ： #navbar {width: 80%;
          height: 23px; }
       #navbar ul {list-style-type: none; }
       #navbar li {float: left;}
       #navbar li a {font-weight: bold; }
2.&的使用:父选择器引用伪类如何,像:hover? 它和它得到父选择器之间没有空格, 但仍然可以嵌套他们.你使用Sass的特殊字符&就可以了.在一个选择器里, &将会逐字被父选择器替换。
   style.scss ：a {color: #ce4dd6;}
                     &:hover{color: #ffb3ff;}
                     &:visited{color:#c458cb;}}
   style.css ：a {color: #ce4dd6;}
      a:hover{color: #ffb3ff;}
      a:visited{color: #c458cb;}

3.$的使用:变量Sass允许你定义整个样式表可用的变量.变量以$始，变量声明像属性似的.他们可以被赋值任何css允许使用的属性值, 像颜色,数字(带有单位),或文本。
   style.scss：$main-color:#ce4dd6; $style:solid;
      #navbar{border-bottom:{color $main-color;style:$style;}}
      a{color:$main-color;&:hover{border-bottom:$style 1px;}}

   style.css ：#navbar{border-bottom-color: #ce4dd6;border-bottom-style: solid;}
      a {color: #ce4dd6;} a:hover{border-bottom: solid 1px;}

   style.scss：#navbar {
         $navbar-width: 800px;
         $items: 5;
         $navbar-color: #ce4dd6;
         width: $navbar-width;
         border-bottom: 2px solid $navbar-color;
         li {float: left;
          width: $navbar-width/$items - 10px;
          background-color:
          lighten($navbar-color, 20%);
          &:hover { background-color:lighten($navbar-color, 10%); }
         }
        }
   style.css ：#navbar{width: 800px;
        border-bottom: 2px solid #ce4dd6;
      }
      #navbar li {float: left;
         width: 150px;
         background-color: #e5a0e9;
      }
      #navbar li:hover { background-color: #d976e0; }
4.#{}的使用：属性使用.可以用 #{} 将$定义的变量应用到属性上。
   style.scss：$side:top; $radius:10px;
      .rounded- {border-#{$side}-radius: $radius;
         -moz-border-radius-#{$side}: $radius;
         -webkit-border-#{$side}-radius: $radius;}
   style.css：.rounded-top { border-top-radius: 10px;
         -moz-border-radius-top: 10px;
         -webkit-border-top-radius: 10px; }

5.@Mixins:使用 “@mixin” 来定义,它可以接受成块的样式，然后可以在其他选择器使用 “@include”来引用它们.
   style.scss：@mixin rounded-top {$side: top;
           $radius: 10px;
           border-#{$side}-radius: $radius;
           -moz-border-radius-#{$side}: $radius;
           -webkit-border-#{$side}-radius:$radius;}
      #navbar li { @include rounded-top; }
      #footer { @include rounded-top; }
   style.css： #navbar li { border-top-radius: 10px;
         -moz-border-radius-top: 10px;
         -webkit-border-top-radius: 10px; }
      #footer {border-top-radius: 10px;
        -moz-border-radius-top: 10px;
        -webkit-border-top-radius: 10px; }
6.mixin arguments：Arguments 是用括号包围的一组使用逗号分隔的变量列表.每次使用mixins的时候arguments，变量可以被赋予不用的值.
   style.scss：@mixin rounded($side, $radius: 10px){border-#{$side}-radius: $radius;
               -moz-border-radius-#{$side}:$radius;
               -webkit-border-#{$side}-radius: $radius;}
      #navbar li {@include rounded(top); }
      #footer    {@include rounded(top, 5px); }
      #sidebar   {@include rounded(left, 8px); }
   style.css： #navbar li {border-top-radius: 10px;
         moz-border-radius-top: 10px;
         -webkit-border-top-radius: 10px; }
      #footer {border-top-radius: 5px;
          -moz-border-radius-top: 5px;
          -webkit-border-top-radius: 5px; }
      #sidebar {border-left-radius: 8px;
          -moz-border-radius-left: 8px;
           -webkit-border-left-radius: 8px; }
7.@include的使用：用来引用@mixins定义的数据。
   _rounded.scss：@mixin rounded($side, $radius: 10px) {border-#{$side}-radius: $radius;
                 -moz-border-radius-#{$side}: $radius;
                 -webkit-border-#{$side}-radius: $radius;}
   style.css：#navbar li {border-top-radius: 10px;
         -moz-border-radius-top: 10px;
         -webkit-border-top-radius: 10px; }
        #footer {border-top-radius: 5px;
        -moz-border-radius-top: 5px;
        -webkit-border-top-radius: 5px; }
        #sidebar {border-left-radius: 8px;
         -moz-border-radius-left: 8px;
         -webkit-border-left-radius: 8px; }
   style.scss：@import "rounded";
       #navbar li { @include rounded(top); }
       #footer { @include rounded(top, 5px); }
       #sidebar { @include rounded(left, 8px); }