scss SCSS-基础

Posted 2021-05-17

Add _ before file name to prevent the preprocessor from creating a CSS file of that same name.
It is mostly used along side the @import 

*) Create file with underscore in front of its name eg: _variables.scss
*) You can use these files to store different codes separately
*) You can use one of them to store all variables or/and mixins
 
@import 'variables';

nav .menu{
     background-color:red;
 
    ul{
	list-style-type:none;
	}
	
	ul>li{
	  display:inline-block;
	}
	
	ul>li:hover > a{
	  background-color:#000;
	}
}
 
 
------------CSS---------------------
 
nav .menu {
  background-color: red; 
  }
  
nav .menu ul {
    list-style-type: none; 
	}
	
nav .menu ul > li {
    display: inline-block; 
	}
 
nav .menu ul > li:hover > a {
    background-color: #000; 
	}

@mixin hello($bye)
{
 border-radius:$bye;
}
 
 
 
.box1{
 @include hello(10px);
 
}
 
.box2 {
 @include hello(10px 20px);
 
}
 
 
------------CSS---------------------
 
.box1 {
  border-radius: 10px; 
  }
 
.box2 {
  border-radius: 10px 20px; 
  }

$hello:red;
 

.hi {
    color:$hello;
}
 
------------CSS---------------------
 
.hi {
    color:red;
}

.foo {
  color: black;
  border: 1px solid black;
}
 
.bar {
  @extend .foo;
  background-color: red;
}
 
 
------------CSS---------------------
 
.foo, .bar {
  color: black;
  border: 1px solid black; 
}
 
.bar {
  background-color: red; 
}