scss

本文详细介绍了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); }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值