不一样的css,sass(scss)的基本使用

前言

此文主要记录sassscss语法的基本使用。sasscss的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。

基础内容

1.变量

 /*scss*/ 
//声明变量
$primary-color:#1269b5;

//使用变量
div.box{
    background-color: $primary-color;    
}

 /*css*/ 
div.box{
    background-color:#1269b5;    
}

2.嵌套

  • 后代

 /*scss*/ 
.nav {
  height: 100px;
  ul {
    margin: 0; 
    li {
     float: left;
     list-style: none;
     padding: 5px;
      }
   }
}

 /*css*/
.nav{
    height: 100px;
}

.nav ul{
    margin: 0;
}

.nav ul li {
    float: left;
    list-style: none;
    padding: 5px;
}
  • 嵌套时调用父选择器 (父子)

    使用&的地方会使用父选择器

 /*scss*/ 
 .nav {
   & &-text {
      font-size: 15px;
        &:hover{
          color: blue;
       }
    } 
 }
 
  /*css*/ 
 //父子层级的
 .nav .nav-text{
    font-size: 15px; 
 }
 
 .nav .nav-text:hover{
    color: blue;
 }
  • 属性的嵌套
 /*scss*/ 
 .nav {
   border: 1px solid #000 {
     left:0;
     right:0;
    }
  }
 
 /*css*/ 
 .nav {
     border: 1px solid #000;
     border-left: 0;
     border-right: 0;
  }
 

3.混合

/*scss*/ 
 //声明一个setColor的混合
 @mixin  setColor ($text-color,$background) {
  color:$text-color;
  background-color:$background;
    .text {
      color: darken($text-color,10%); //在原来颜色的基础上加深10%
     } 
  }
  
 .content{
     //使用这个混合
    @include  setColor(#fefefe,#969696)
  }
 
 /*css*/
 .content {
    color: #fefefe;
    background-color: #969696;
  }

 .content .text{
    color: #e5e5e5;
 }
 
tips: setColor是名称,传递的参数一定要带$,和变量一样;

4.继承

继承时也会继承和被继承的类相关的选择器样式

/*scss*/ 

 .content {
     padding: 15px;
 }
 
 .content a {
     font-weight: bold;
 }

 .content-info {
     @extend .padding;
     color: #969696;
 }
 
 /*css*/ 
 
 .content , .content-info{
      padding: 15px;
    }

 .content a ,  .content-info a{
      font-weight: bold;
   }
   
 .content-info {
      color: #969696;
   }
   

5.Partials和@import

  • 被引入的文件,Partials文件,以下划线开头,不会被编译。

    _base.scss


  body {
     margin: 0;
     padding: 0;
  }
  

other.scss

  /*scss*/ 
 @import "base";
  .a {
    color: #969696;
  }
 
  /*css*/
   body {
     margin: 0;
     padding: 0;
   }
  
  .a{
    color: #969696;
   }
   

6.注释

 //这是单行,不会出现在css里面
 /*这是多行,会包含在没有压缩之后的css里面*/
 /*!这是强制输出注释内容*/

7.列表

  • 用空格或逗号分隔开的就是列表,类似其他语言的数组

padding: 5px 10px;

border: 1px solid red;
  • 列表函数

length(5px 10px) //2  获取长度

nth(5px 10px,1) //5px  获取序号 从1开始

index(1px solid red,solid) //2  获取下标从0开始

append(5px 10px,5px) // (5px 10px 5px)   添加 

join (5px 10px ,5px 0) //(5px 10px 5px 0) 组合成新的列表

join (5px 10px ,5px 0,comma) //(5px,10px,5px,0)

8.map与相关函数


 $colors:(
  light:#fff,
  dark:#000
 )
  
 map-get($colors,dark)  // #000 //获取指定的值
 map-keys($colors) // (light,dark) //获取所有的key
 map-values($colors) // (#fff,#000) //获取所有的值
 map-has-key($colors,light) //true  是否有当前的key
 map-merge($colors,(light-gray: #e5e5e5))  //添加
 map-remove($colors,light,dark)  // (light-gray: #e5e5e5)     删除
            

9.插值

#{}, 一个#和一个花括号里包含变量就是插值。


 /*scss*/
 $name: "info";
 $attr: "border";
 .content-#{$name} {
   #{$attr}-color: #ccc;
 } 
 
 /*css*/
  .content-info {
     border-color: #ccc;
  }   

10. 条件控制

  /*scss*/
  $flag= true;
  $theme: "light";
  .body {
   @if  $theme == dark {
     backgroud-color: black;
   } @else if $theme == light {
     backgroud-color: white;
   } @else {
     backgroud-color: grey; 
   }
 }

  .content {
    @if  $flag {
      color: red; 
     }  @else {
      color: yellow;   
     }
   }
   
 /*css*/
  .body {
    backgroud-color: white;  
  }
  
  .content {
    color: red;  
  }
  
tips: 并且:and/&& ,或:or、去反:not、返回: @return

10. @for

  • @for $var form <开始值> through <结束值>
  • @for $var form <开始值> to <结束值>
/*scss*/
$columns: 3;
@for $i from 1 through $columns {
 .col-#{$i} {
   width: 100% / $columns * $i  
   }     
}

@for $i from 1 to $columns {
 .row-#{$i} {
   width: 100% / $columns * $i  
   }     
}

/*css*/
.col-1 {
     width: 25%
}

.col-2 {
     width: 50%
}

.col-3 {
     width: 75%
}


.row-1 {
     width: 25%
}

.row-2 {
     width: 50%
}
tips: through循环的次数,包含结束值 , to循环次数 不包含结束值

11. @each

循环列表

 /*scss*/
 $icons:success error warning;
 @each $icon in $icons {
  .icon-#{$icon} {
     background-image: url(../images/icons/#{$icon}.png) 
  }
 }

 /*css*/
 
 .icon-success {
    background-image: url(../images/icons/success.png)   
 } 
 
 .icon-error {
    background-image: url(../images/icons/error.png)   
 }
 
 .icon-warning {
    background-image: url(../images/icons/warning.png)   
 } 

12. @while

/*scss*/
 $i: 6;
 @while $i > 0 {
   .item-#{$i} {
       width: 5px * $i; 
    }
   $i: $i-2;    
 }
 
/*css*/
.item-6 {
     width: 30px;
 }
 
.item-4 {
     width: 20px;
 }
 
.item-2 {
    width: 10px;
 }

13. 用户自定义函数

 /*scss*/
 $colors:(light: #fff,dark: #000)
 @function color($key){
  //警告
  @if not map-has-key($colors,$key)   {
   @warn  "在$colors里没找到 #{$key}这个key"
   } 
   @return map-get($colors,$key);
 }
 
 .body {
   background-color: color(light);
 }
 
 /*css*/
 .body {
   background-color:  #fff; 
 }
 
tips: 异常信息可以设置警告@warn和错误@error

BEM规范建议

规范


.block { /* 块*/ } 
.block__element { /* 元素 */ } 
.block--modifier { /* 修饰符 */ }

实际应用

 
<!--块 -->
<div class="content"> 

 <!-- content__button 元素 -->
  <button   
    class="content__button
    
    content__button--red ">
  </button>
    <!-- content__button--red 修饰 -->
</div>



 
 /*scss*/

//块
.content {
    
  //元素    
  &__button {
      width: 40px;
      height:  40px;
      padding: 5px;
  }

  //修饰
   &__button--red {
     color: red 
   }
}

/*css*/

content__button {
     width: 40px;
     height:  40px;
     padding: 5px;
 }
 
 content__button--red {
     color: red 
 }
 

推荐

如果还想知道前端其他的方面的知识,可以看过来

Image placeholder
waltwang
未设置
  86人点赞

没有讨论,发表一下自己的看法吧

推荐文章
前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知

「模仿」是架构师的基本能力:守破离

本文作者曲健,1024生人,天选程序员,浆糊人送外号“大爷DàYé”,目前在奥琪科技担任首席架构师一职。二零一八留不住,朱颜辞镜花辞树。鄙人平素喜偶厌奇,以致现在对2019仍避之不及、兴致索然,更羞愧

0103-springmvc的基本流程

背景现在的it研发,已经从管理系统时代迈入了互联网系统时代。页面开发已经从基于JSP+struts转变为为前后端分离的方式(springMVC+JS);思想MVCmvc框架不仅适用于java的开发,也

如何删除多余的css

如何删除多余的css1、chrome浏览器F12审查元素的Audits说明:使用Audits,会检测出页面中没有用到的css,需要手动删除多余的css;同时需要说明的是检测出多余无用的css块,而不是

如何用别人的css样式

如何用别人的css样式使用别人的css样式首先需要引入,引入到自己的HTML文档中,主要有两种方式。1、下载别人的css样式,通过link标签引入。打开网站,按下f12打开开发者工具面板,选中Sour

jsp中的css写在哪儿

jsp中的css写在哪儿jsp中css写在style标签中,style标签放在head标签里。 .input_textarea{ color:#f00; } 在jsp中加入css样式,就跟ht

仿站复制的别人的css违法吗

仿站复制的别人的css违法吗通常来说仿站复制别人的css是不违法的,若css中存在具有版权的图片,则是属于侵权行为,需要更换为自己的图片或者是无版权的图片。仿站违法侵权范畴:页面完全一致,标题企业名称

dw里怎样设置图片的css样式

dw里怎样设置图片的css样式1、首先在文件内插入一张图片,点击插入\图像,选择一张图片即可。2、选中图像,点击css样式窗口的+号,新建一个CSS(相关课程推荐:css视频教程)样式,打开对话框。选

基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

InnoDB到底支不支持哈希索引,为啥不同的人说的不一样?

继续回答水友提问(最近问MySQL的多):沈老师,我在网上看到不同的资料,有的说InnoDB支持哈希索引,有的说不支持,到底哪个是正确的呢?对于InnoDB的哈希索引,确切的应该这么说:(1)Inno

混战的CLM市场法智易以AI亮剑

当前,企业内部对合同法务管理的需求正在越来越凸显,而随着国内电子签名的快速发展,国内将迎来CLM和电子签(eSignature)结合的广阔市场。CLM是ContractLifecycleManagem

一个简单的基于 Redis 的分布式任务调度器 —— Java 语言实现

折腾了一周的JavaQuartz集群任务调度,很遗憾没能搞定,网上的相关文章也少得可怜,在多节点(多进程)环境下Quartz似乎无法动态增减任务,恼火。无奈之下自己撸了一个简单的任务调度器,结果只花了

全面集成阿里云,Salesforce在中国正式转正

进入2019年,SaaS竞争已进入深水区,当很多CRM厂商还在庆幸Salesforce在中国没有准入资格时,Salesforce已经在悄然布局,曲线入市。7月25日,在阿里云峰会·上海站上,全球最大C

到2025年,SDN市场将达到1000亿美元

虽然NFV不断发展,但软件定义网络(SDN)也在服务提供商的网络中蓬勃发展。根据GlobalMarketInsights的报告显示,到2025年,SDN市场将从去年的80多亿美元增加的1000亿美元。

再见 Spring Boot 1.X ,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring官方在其博客宣布,SpringBoot1.x停止维护,SpringBoot1.x生命周期正式结束。其实早在2018年7月30号,Spring官方就已经在博客进行过预告,

波士顿动力版“狗多力量大”!10只机器狗拉动大卡车,SpotMini量产在即

大数据文摘出品作者:蒋宝尚、魏子敏拉动一辆卡车需要多少条狗?波士顿动力最新给出的答案是——10只。今天凌晨,机器人公司波士顿动力最新发布了一段视频,视频中,网红机器狗SpotMini刚刚学会了新技能:

到2023年,SD-WAN供应商的收入将增至44亿美元

包括设备、控制器和管理软件在内的全球软件定义广域网(SD-WAN)市场在2019年第二季度连续增长了23%,这是因为企业加大了购买力度,以用SD-WAN取代其已安装的路由器基础启用的设备。根据IHSM

历经坎坷多次易主,SUSE Linux路在何方?

SUSE近期向媒体发布的一份公告中,至少12次提到了它的独立性。有了投资者的大量资金,这家企业最终能否走向成功?3月15日,SUSE发布公告宣布,瑞典私募股权公司EQT完成从MicroFocus对SU

GitHub Actions,卧槽!牛批!

前段时间我更新了我的分布式爬虫管理框架——Gerapy现在DevOps的理念可谓是相当火,其中CI/CD(持续集成、持续部署)是必不可少的环节。有了它们,我们开发完软件之后,一些测试、构建、部署的

Twitter 宣布抛弃 Mesos,全面转向 Kubernetes

作者|阿里云智能高级技术专家张磊划重点Twitter的基础设施从Mesos全面转向Kubernetes阿里云容器平台团队即将开源 Kubernetes高级作业管理集合美国西部时间5月2日下午7点,Tw

谷歌云重磅推出混合云平台Anthos,兼容竞争对手云服务 | Google Cloud Next’19

大数据文摘出品作者:蒋宝尚、周素云当地时间4月9日,谷歌云年度盛会GoogleCloud Next’19在旧金山的Moscone召开。在会上,谷歌云的新任CEO,曾经的甲骨文二号人物ThomasKur

Xcode调试、性能优化基本工具使用简单整理

断点1.普通断点在行号那儿点一下就加上了,最常用的断点,略。2.条件断点很多时候问题代码是被高频调用直到特定条件下才出现问题的,这种时候可以使用条件断点。在任意断点右击选择EditBreakpoint

《MySQL主从不一致情形与解决方法》

一、MySQL主从不同步情况1.1网络的延迟由于mysql主从复制是基于binlog的一种异步复制通过网络传送binlog文件,理所当然网络延迟是主从不同步的绝大多数的原因,特别是跨机房的数据同步出现

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解