1. ¿Qué es sass?
- Sass extiende CSS3, agregando características como reglas, variables, mixins, selectores, herencia y más. Sass genera un código CSS bien formateado, que es fácil de organizar y mantener.
- SASS es una extensión de la sintaxis CSS3 (hoja de estilo en cascada). Puede utilizar funciones como anidar, mezclar y herencia de selectores para escribir hojas de estilo de forma más eficaz y flexible. Sass finalmente compilará CSS legal para navegar, lo que significa que su sintaxis no es fácil de reconocer para los navegadores (aunque es muy similar a la sintaxis CSS, casi la misma), debido a que no es un formato CSS estándar, se pueden usar variables dinámicas dentro su gramática, por lo que es más como un lenguaje dinámico muy simple.
- Cuanto más grande sea el proyecto, más grande será el archivo css y más códigos repetidos, que serán difíciles de mantener Con la ayuda de Sass, se puede mejorar la eficiencia de la escritura css.
2. Instalación:
cmd abre la ventana de control de comandos local, ingrese la siguiente cadena y presione Enter para instalarlo.
npm install -g sass
Para obtener más métodos de instalación, haga clic en Sass para ir al sitio web oficial.
3. Compile el archivo .scss en un archivo .css:
Sass usa .scss como extensión del archivo. No se puede usar directamente en la etiqueta <link>. Debe compilarse en un archivo .css.
Manifestación:
- Cree un archivo html y escriba una etiqueta h1 a voluntad:
- Cree un archivo con el sufijo .scss, como input.scss, y escriba alguna sintaxis sass de estilo básico:
- Abra el controlador de comando cmd en la ruta donde se encuentra el archivo html e ingrese:
sass input.scss ouput.css
Significa convertir el nombre input.scss en un archivo llamado ouput.css (el nombre es gratuito).
Después de presionar Enter, encontré que obtuve el archivo css.
El contenido del archivo css es el siguiente, puede ver que la conversión está completa: el
siguiente paso es la operación anterior, solo use la etiqueta <link> para importar el archivo css en el HTML.
- Pero es imposible decir que una oración de .scss se convierte una vez. Es demasiado problemático, por lo que se puede convertir automáticamente. Cuando escribo una oración en .scss, .css generará automáticamente una oración. Ingrese lo siguiente en cmd:
sass --watch input.scss:ouput.css
Indica cambios de monitoreo Cuando input.scss cambia, output.css cambia:
5. ¿Qué pasa si hay varios archivos css en un archivo html? Luego puede monitorear directamente los cambios de carpeta:
como:
sass --watch yuan:bian
Medios: cuando cambia cualquier archivo con el sufijo .scss en la carpeta llamada yuan, se compilará en la carpeta llamada bian (el archivo .css correspondiente se generará automáticamente)
4. Uso y funciones básicos:
Tabla de contenido:
1. Variable;
2. Anidamiento;
3. Mixin;
4. Herencia;
5. Importación;
6. Cálculo;
7. Función de color;
8. Interpolación;
9. Si se juzga;
10. For loop;
11. List loop;
12. while loop;
13.función función personalizada;
… para actualizar…
Uso detallado :
- Variable (después de definir la variable , se puede hacer referencia directamente en el selector): Por
ejemplo: defino una variable llamada $ yanse y el valor es color rgb (223, 148, 148)
$yanse: rgb(223, 148, 148);
Referencia directamente en el selector:
h1{
color: $yanse；
}
Por supuesto, las variables también pueden ser muñecas anidadas. Por ejemplo, defino una variable llamada $ kuang, que se refiere a $ yanse
$yanse: rgb(223, 148, 148);
$kuang: 1px solid $yanse;
Entonces también use directamente:
h1{
border: $kuang;
}
- Anidamiento (los selectores secundarios se pueden anidar en el selector principal)
como: las siguientes etiquetas
<div>
<ul>
<li></li>
</ul>
</div>
Puedes escribir directamente así:
div{
height: 100px;
ul{
height: 80px;
li{
height: 50px;
}
}
}
Es equivalente a:
div {
height: 100px;
}
div ul {
height: 80px;
}
div ul li {
height: 50px;
}
Si li tiene un selector de pseudo-clase: hover se puede escribir así (agregue &: hover {} adentro):
div{
height: 100px;
ul{
height: 80px;
li{
height: 50px;
&:hover {
color: #000;
}
}
}
}
Equivale a escribir:
div ul li:hover {
color: #000;
}
No solo los selectores, sino también las propiedades se pueden anidar, así:
div{
height: 100px;
font: {
family: 'fangsong';
size: 20px;
weight: 700;
}
border: 1px solid red {
left: 0;
top: 0;
}
}
Es equivalente a:
div {
height: 100px;
font-family: "fangsong";
font-size: 20px;
font-weight: 700;
border: 1px solid red;
border-left: 0;
border-top: 0;
}
- Mixin (equivalente a un conjunto de estilos preescrito, citado directamente en otro lugar):
Sintaxis básica:
@mixin 名字（参数1，参数2，...）
{
........样式.......
}
Por ejemplo (sin parámetros, también se puede anidar dentro, un mixin llamado hunhe se define a continuación, y luego se llama por (@include name) en el selector de div):
@mixin hunhe {
color: red;
a {
font-size: 12px;
}
}
div{
@include hunhe;
}
Es equivalente a:
div {
color: red;
}
div a {
font-size: 12px;
}
Hay parámetros (más flexible, el parámetro es equivalente al valor que desea, debe escribir $ delante del nombre del parámetro y la posición del valor debe ser correcta al llamar):
Como:
@mixin hunhe($one,$two) {
color: $one;
a {
color: $one;
font-size: $two;
}
}
div{
@include hunhe(red,15px);
}
* div también se puede escribir así, especifique el nombre del parámetro y la posición del parámetro se puede cambiar a voluntad:
div{
@include hunhe($two:15px,$one:red);
}
Lo anterior es equivalente a:
div {
color: red;
}
div a {
color: red;
font-size: 15px;
}
- Herencia / extensión (un selector puede heredar todos los estilos de otro selector)
como: .two class hereda todos los estilos de .one clase ( @extend name ); no solo .one, sino también relacionados con .one se heredan Los detalles son como sigue:
.one{
color: #000;
}
.one a{
font-size: 10px;
}
.two{
@extend .one;
background-color: #fff;
}
Es equivalente a:
.one, .two {
color: #000;
}
.one a, .two a {
font-size: 10px;
}
.two {
background-color: #fff;
}
- @import introduce un archivo con un sufijo .scss como parte de su propio. El archivo importado no se convertirá al formato .css, por lo que el nombre del archivo debe comenzar con un guión bajo, como: _base.scss. No es necesario para importarlo. Escriba subrayado.
Sintaxis: @import: "... ruta"; Por
ejemplo:
cree un archivo llamado _base.scss, escriba algunos selectores y estilos en él, y luego impórtelo en un archivo normal como one.scss, si el directorio es de el mismo nivel:
@import: "base.scss";
De esta forma, .one.scss tiene todos los contenidos en _base.scss.
- Funciones de cálculo (SASS permite utilizar cálculos en el código) como:
$chang: 20px;
body{
margin: (10px*2);
left: 20px + $chang;
}
Es equivalente a:
body {
margin: 20px;
left: 40px;
}
- Función de color (SASS proporciona algunas funciones de color integradas para generar series de colores).
hsl (tono, saturación, luminosidad);
body{
background-color: hsl(5, 20%, 20%);
}
Es equivalente a:
body {
background-color: #3d2b29;
}
hsl (tono, saturación, luminosidad, opacidad);
body{
background-color: hsl(5, 20%, 20%,0.5);
}
Es equivalente a:
body {
background-color: rgba(61, 43, 41, 0.5);
}
Se utiliza para ajustar el tono: ajuste de tono (color, grado de ajuste);
body{
background-color: adjust-hue(hsl(0,100,50%), 100deg);
}
Es equivalente a:
body {
background-color: #55ff00;
}
Se utiliza para ajustar el brillo del color: aclarar hace que el color sea más brillante, oscurecer hace que el color sea más oscuro,
como por ejemplo: aclarar (color, aumentar el porcentaje de brillo);
body{
background-color: lighten(rgb(228, 145, 145),50%);
color: darken(rgb(228, 145, 145),50%);
}
Es equivalente a:
body {
background-color: white;
color: #5f1717;
}
Se utiliza para ajustar la pureza del color, saturar para que el color sea más puro, desaturar para que el color se
sature impuro (color, porcentaje);
- La interpolación inserta un valor en otro valor, el uso específico es el siguiente # {variable} como:
$yanse: color;
body{
#{
$yanse}:red;
}
Es equivalente a:
body {
color: red;
}
- si juicio (la lógica es similar a la del lenguaje C):
sintaxis:
@if 判断条件 {
.......执行语句...
} @else {
...else有就写没就不写....
}
Como:
$jia: false;
body{
@if false{
color: red;
}
@if 2>3 {
background-color: white;
}@else{
background-color: black;
}
}
Es equivalente a:
body {
background-color: black;
}
- para la
sintaxis de bucle :
结束值不执行：
@for 变量 from 开始值 through 结束值 {
......
}
结束值也执行：
@for 变量 from 开始值 to 结束值 {
......
}
ejemplo:
@for $i from 1 to 3 {
.div#{
$i}{
height: $i*20px;
}
}
Es equivalente a:
.div1 {
height: 20px;
}
.div2 {
height: 40px;
}
- Bucle de lista , puede recorrer los valores de una lista, la lista es equivalente a una matriz;
sintaxis:
@each 变量 in 列表{
...
}
ejemplo:
$yanse: red blue black;
@each $i in $yanse {
.div#{
$i}{
color: $i;
}
}
Es equivalente a:
.divred {
color: red;
}
.divblue {
color: blue;
}
.divblack {
color: black;
}
- Mientras que el bucle , hay condiciones de juicio más flexibles.
gramática:
@while 条件 {
...
}
ejemplo:
$gao: 1;
@while $gao<4 {
.div#{
$gao}{
height: $gao*10px;
}
$gao : $gao+1;
}
Es equivalente a:
.div1 {
height: 10px;
}
.div2 {
height: 20px;
}
.div3 {
height: 30px;
}
13. Función de función personalizada , se puede llamar a la función definida por usted mismo;
sintaxis:
@function 名字(参数1，参数2，..){
....
}
ejemplo:
@function ziji ($bian)
{
@return $bian+10px;
}
div{
width: ziji(5px);
}
Es equivalente a:
div {
width: 15px;
}
para resumir:
Nota: Continuaré agregando y actualizando el contenido de este artículo ~
Si te ayuda, dale me gusta ~
Otros artículos:
efecto flotante de tarjeta receptiva html + css
animación de carga de onda de agua html +
barra de navegación css efecto degradado de desplazamiento html + css + js
página del libro cambio de página html + css
álbum estéreo 3D html + css
botón de transmisión de colores html + css
, etc.…