Documentación

    Table of Content
    • Formatos de archivo 3D
      • Formatos de archivo 3D
      • 3D2
      • 3DM
      • 3DS
      • 3MF
      • AMF
      • ASE
      • B3D
      • DAE
      • DBM
      • DRC
      • E57
      • FBX
      • GLB
      • GLTF
      • IPT
      • JT
      • MA
      • MB
      • MP
      • OBJ
      • PLY
      • PRC
      • RVM
      • STEP
      • STP
      • U3D
      • USD
      • USDZ
      • VRML
      • X
      • X3D
    • Formatos de archivos de audio
      • Formatos de archivos de audio
      • 8SVX
      • AA
      • AAC
      • AAX
      • AC3
      • ACT
      • AIFF
      • ALAC
      • AMR
      • APE
      • CDA
      • DSS
      • FLAC
      • GSM
      • M3U
      • M3U8
      • M4A
      • M4B
      • M4P
      • MID
      • MKA
      • MMF
      • MOD
      • MP2
      • MP3
      • MPC
      • MXL
      • NSA
      • OGG
      • OPUS
      • RA
      • RF64
      • SDT
      • STAP
      • VOC
      • VOX
      • VQF
      • WAV
      • WEBA
      • WFP
      • WMA
      • WPL
      • WV
    • Formatos de archivo CAD
      • Formatos de archivo CAD
      • ART
      • ASC
      • ASM
      • CATPART
      • CF2
      • DC3
      • DGN
      • DST
      • DWF
      • DWFX
      • DWG
      • DWT
      • DXF
      • FZP
      • HPGL
      • IFC
      • IGES
      • IGS
      • JVSG
      • NC
      • NWC
      • NWD
      • NWF
      • PAT
      • PHJ
      • PLT
      • PSM
      • PSS
      • RFA
      • RFT
      • RML
      • RVT
      • SLDPRT
      • STL
    • Formatos de archivo de compresión
      • Formatos de archivo de compresión
      • 7Z
      • ACE
      • ALZ
      • APK
      • ARC
      • ARJ
      • B1
      • B6Z
      • BKF
      • BNDL
      • BZ2
      • DAA
      • DAR
      • DEB
      • DMG
      • DZ
      • ECS
      • FZPZ
      • GZ
      • GZIP
      • ICE
      • ISO
      • KGB
      • LBR
      • LQR
      • LZ
      • LZ4
      • LZH
      • LZMA
      • LZO
      • LZX
      • MBW
      • MINT
      • MPKG
      • MPQ
      • NPK
      • OAR
      • PAGES
      • PEA
      • PET
      • PF
      • PKG
      • PTK
      • PUP
      • RAR
      • RPM
      • RTE
      • S00
      • SIFZ
      • SIT
      • SITX
      • SY_
      • TAR
      • TBZ
      • TGS
      • TGZ
      • TPSR
      • TZ
      • VPK
      • WHL
      • WUX
      • XAPK
      • XAR
      • XPI
      • XZ
      • Z
      • ZIM
      • ZIP
      • ZIPX
      • ZL
    • Base de datos
      • Formatos de archivo de base de datos
      • 4DB
      • 4DD
      • ACCDB
      • ACCDC
      • ACCDE
      • ACCDR
      • ACCDT
      • ACCDW
      • ACCFT
      • ADB
      • ADE
      • ADF
      • ADN
      • ADP
      • ALF
      • ANB
      • AQ
      • ASK
      • BAK
      • BCP
      • BTR
      • CDB
      • DACPAC
      • DAT
      • DB
      • DB3
      • DBC
      • DBF
      • DDL
      • DTSX
      • FMP12
      • FMPSL
      • FP5
      • FP7
      • GDB
      • ITW
      • LDF
      • LOG
      • MDB
      • MDF
      • MYI
      • NDF
      • NSF
      • SAV
      • SDF
      • SQL
      • SQLITE
      • TE
      • TRC
      • TRM
      • UDL
      • WDB
    • Disco y medios
      • Formatos de archivos multimedia y de discos
      • BIN
      • CCD
      • CSO
      • CUE
      • GADGET
      • IMG
      • NKIT
      • NRG
      • OVA
      • OVF
      • ROM
      • SDI
      • Toast
      • UDF
      • VCD
      • VDI
      • VHD
      • VHDX
      • WBFS
      • WIM
      • WUD
    • Formatos de archivo de libros electrónicos
      • Formatos de archivo de libros electrónicos
      • ACSM
      • AEP
      • APNX
      • AVA
      • AZW
      • AZW1
      • AZW3
      • AZW4
      • BKK
      • BPNUEB
      • CBC
      • CBR
      • CBZ
      • CEB
      • CEBX
      • DNL
      • EA
      • EAL
      • EBK
      • EDN
      • EPUB
      • ETD
      • FB2
      • FKB
      • HAN
      • HTML0
      • HTMLZ
      • HTXT
      • HTZ4
      • HTZ5
      • IBOOKS
      • KFX
      • KOOB
      • LIT
      • LRF
      • LRS
      • LRX
      • MART
      • MBP
      • MOBI
      • NCX
      • NVA
      • OEB
      • OEBZIP
      • OPF
      • ORB
      • PHL
      • PML
      • PMLZ
      • POBI
      • QMK
      • RB
      • RZB
      • RZS
      • SNB
      • TCR
      • TK3
      • TPZ
      • TR
      • TR3
      • VBK
      • WEBZ
      • YBK
    • Formatos de archivo de correo electrónico
      • Formatos de archivo de correo electrónico
      • EDB
      • EML
      • EMLX
      • ICS
      • MBOX
      • MSG
      • OFT
      • OLM
      • OST
      • P7S
      • PST
      • RPMSG
      • TNEF
      • VCF
    • Ejecutable
      • Formatos de archivos ejecutables
      • AHK
      • BAT
      • BTAPP
      • CGI
      • CMD
      • COM
      • EXE
      • IPA
      • MSI
      • MST
      • PIF
      • PYC
      • REG
      • WSF
      • WSH
      • XBE
      • XEX
    • Finanzas
      • Formatos de archivo de finanzas
      • ABA
      • IXBRL
      • XBRL
    • Fuente
      • Formatos de archivo de fuente
      • BDF
      • CFF
      • CFF2
      • EOT
      • FNT
      • FON
      • JFPROJ
      • MFX
      • OTF
      • PFA
      • PFB
      • PFM
      • SFD
      • TTC
      • TTF
      • Type1
      • WOFF
    • Formatos de archivos de juegos
      • Formatos de archivos de juegos
      • BMZ
      • BNS
      • CLIP
      • CON
      • CSD
      • CT
      • DEK
      • FOMOD
      • GAM
      • KODU
      • MCWORLD
      • MGX
      • PAK
      • PCC
      • PSS
      • PUP
      • PWF
      • REL
      • REP
      • RPX
      • SAV
      • SFAR
      • SID
      • U8
      • UMX
      • W3N
    • Formatos de archivo GIS
      • Formatos de archivo GIS
      • 000
      • 3D
      • 3DD
      • ADF
      • APL
      • APR
      • ATX
      • AUX
      • DEM
      • DIV
      • DLG
      • E00
      • ETA
      • FIT
      • GeoJSON
      • GLB
      • GMAP
      • GML
      • GPKG
      • GPX
      • IMG
      • KML
      • KMZ
      • LOC
      • MPS
      • NM2
      • NTF
      • OSM
      • QGD
      • QGS
      • QGZ
      • QLR
      • QML
      • SBN
      • SHP
      • SHX
      • SP3
      • SSF
      • TCX
    • Formatos de archivo de imagen
      • Formatos de archivo de imagen
      • AI
      • APNG
      • ART
      • AVIF
      • BMP
      • BPG
      • CDR
      • CLIP
      • CMX
      • CPC
      • CR2
      • CR3
      • CSL
      • CT
      • CUR
      • DCM
      • DCR
      • DCX
      • DDS
      • DIB
      • DICOM
      • DJVU
      • DNG
      • ECW
      • EMF
      • EMZ
      • EXIF
      • FLIF
      • FODG
      • GBR
      • GIF
      • HDR
      • HEIC
      • HEIF
      • ICNS
      • ICO
      • J2C
      • J2K
      • JFIF
      • JP2
      • JPC
      • JPEG
      • JPF
      • JPM
      • JPX
      • JXR
      • MNG
      • MP
      • MPO
      • NEF
      • ODG
      • OTG
      • PCT
      • PCX
      • PICT
      • PNG
      • PPP
      • PSB
      • PSD
      • PSP
      • PSPIMAGE
      • SKP
      • SVGZ
      • TGA
      • THM
      • TIFF
      • WEBP
      • WMF
      • WMZ
      • XPM
      • XPR
    • Formatos de archivo misceláneos
      • Formatos de archivo misceláneos
      • AML
      • ART
      • BUP
      • CMS
      • CTG
      • DAP
      • ENL
      • ERR
      • GPG
      • H4
      • H5
      • ICA
      • KLQ
      • LOCK
      • LRC
      • MD5
      • MSO
      • OBB
      • ODF
      • OGG
      • PES
      • RIS
      • RML
      • SSP
      • THM
      • TORRENT
      • VIM
      • VIMRC
      • XMP
      • XSMX
    • Formatos de archivo para tomar notas
      • Formatos de archivo para tomar notas
      • ONE
      • ONETOC2
    • Lenguaje de descripción de página
      • Lenguaje de descripción de página
      • AVERY
      • CGM
      • EPS
      • INDD
      • INDT
      • OXPS
      • PCL
      • PS
      • SVG
      • SWF
      • TEX
      • XPS
      • XSLFO
    • PDF
      • PDF
      • FDF
      • PDF/A
      • PDF/E
      • PDF/UA
      • PDF/VT
      • PDF/X
      • XFDF
    • Formatos de archivo de presentación
      • Formatos de archivo de presentación
      • KEY
      • ODP
      • OTP
      • POT
      • POTM
      • POTX
      • PPS
      • PPSM
      • PPSX
      • PPT
      • PPTM
      • PPTX
    • Programación
      • Programación
      • ABC
      • ACD
      • ADDIN
      • ADS
      • AGI
      • AIA
      • AIDL
      • ALB
      • AML
      • ANE
      • APA
      • APKS
      • APPX
      • APPXBUNDLE
      • APPXUPLOAD
      • APS
      • ARSC
      • AS
      • ASM
      • AWK
      • C
      • CD
      • Class
      • CMAKE
      • CONFIG
      • CPP
      • CS
      • CSPROJ
      • CXX
      • Dart
      • DIFF
      • EGG
      • ERB
      • EX
      • G4
      • GO
      • GROOVY
      • H
      • HAML
      • HH
      • HS
      • HTA
      • ICI
      • IN
      • INC
      • IPR
      • JAR
      • Java
      • JRXML
      • JSP
      • JSPF
      • KT
      • LGO
      • LUA
      • M
      • MAKE
      • MEL
      • MF
      • ML
      • MM
      • MRC
      • MSIX
      • NUPKG
      • NUT
      • PAS
      • PDB
      • PDE
      • PHP
      • PL
      • PY
      • PYD
      • PYI
      • PYM
      • PYW
      • PYX
      • R
      • RBXL
      • RBXM
      • RES
      • RS
      • RST
      • SCALA
      • SCM
      • SCRIPT
      • SH
      • SLN
      • SWIFT
      • TCL
      • TOML
      • TS
      • UNITY
      • VB
      • VBPROJ
      • VBS
      • VCXPROJ
      • XSD
      • YAML
      • YML
      • YPR
    • Formatos de archivo de gestión de proyectos
      • Formatos de archivo de gestión de proyectos
      • MPP
      • MPT
      • MPX
      • P6XML
      • XER
    • Formatos de archivo del editor
      • Formatos de archivo del editor
      • PUB
      • PUZ
    • Informes
      • Formatos de archivo de informes
      • MAR
      • RDL
      • RDLC
      • RPL
      • RPT
    • Formatos de archivo de hoja de cálculo
      • Formatos de archivo de hoja de cálculo
      • 123
      • 12M
      • _XLS
      • _XLSX
      • AST
      • AWS
      • BKS
      • CELL
      • CSV
      • CTS
      • DEF
      • DEX
      • DFG
      • DIF
      • DIS
      • EFU
      • ESS
      • FCS
      • FM
      • FODS
      • FP
      • GNM
      • GNUMERIC
      • IMP
      • MAR
      • NB
      • NUMBERS
      • NUMBERS-TEF
      • ODS
      • OTS
      • PMD
      • PMDX
      • PMVX
      • SDC
      • STC
      • SXC
      • TMV
      • TMVT
      • TSV
      • XAR
      • XL
      • XLA
      • XLAM
      • XLM
      • XLR
      • XLS
      • XLSB
      • XLSM
      • XLSMHTML
      • XLSX
      • XLT
      • XLTHTML
      • XLTM
      • XLTX
    • Formatos de archivo del sistema
      • Formatos de archivo del sistema
      • AML
      • ASV
      • CAB
      • CFG
      • CPG
      • CPL
      • DLL
      • DMP
      • DRV
      • ETL
      • HDMP
      • INI
      • INS
      • LNK
      • MDMP
      • SCR
      • SYS
      • TMP
    • Formatos de archivo de vídeo
      • Formatos de archivo de vídeo
      • 3G2
      • 3GP
      • AMV
      • ARF
      • ASF
      • AVCHD
      • AVI
      • BIK
      • DAV
      • EXO
      • F4V
      • FLV
      • H264
      • H265
      • IDX
      • IFO
      • M2TS
      • M4S
      • M4V
      • MJPEG
      • MK3D
      • MKS
      • MKV
      • MOV
      • MP4
      • MPE
      • MPG
      • MPV
      • MTS
      • MXF
      • NSV
      • PZ
      • QT
      • RM
      • RMVB
      • RV
      • SEC
      • SRT
      • TS
      • VID
      • VOB
      • VP6
      • VP8
      • VP9
      • VTT
      • WEBM
      • WMV
      • XVID
    • Formatos de archivos web
      • Formatos de archivos web
      • A4P
      • A5W
      • AAE
      • ADR
      • AEX
      • ALX
      • AN
      • AP
      • APKG
      • APPCACHE
      • ARO
      • ASA
      • ASAX
      • ASCX
      • ASHX
      • ASMX
      • ASP
      • ASPX
      • ASR
      • ATOM
      • ATT
      • AWM
      • BML
      • BOK
      • BR
      • BWP
      • CDF
      • CER
      • CFM
      • CFML
      • CHA
      • CHAT
      • CHM
      • CMS
      • CODASITE
      • CON
      • CRDOWNLOAD
      • CRL
      • CRT
      • CSHTML
      • CSP
      • CSR
      • CSS
      • DAP
      • DBM
      • DCR
      • DER
      • DHTML
      • DISCO
      • DISCOMAP
      • DML
      • DO
      • DOCHTML
      • DOCMHTML
      • DOTHTML
      • DOWNLOAD
      • DRAWIO
      • DWT
      • ECE
      • EDGE
      • EPIBRW
      • ESPROJ
      • EWP
      • FCGI
      • FMP
      • FREEWAY
      • FWP
      • FWTEMPLATE
      • FWTEMPLATEB
      • GDOC
      • GDOCX
      • GNE
      • GSP
      • HAR
      • HDM
      • HDML
      • HTACCESS
      • HTC
      • HTM
      • HTML
      • HTX
      • HXS
      • HYPE
      • JHTML
      • JNLP
      • JS
      • JSON
      • JSPA
      • KEY
      • KIT
      • LESS
      • MHT
      • MHTML
      • MJS
      • OBML
      • OBML15
      • OBML16
      • P7B
      • P7C
      • PAC
      • PART
      • PEM
      • PRO
      • RHTML
      • RJS
      • RSS
      • Sass
      • SCSS
      • SHTML
      • SPC
      • SSP
      • STC
      • STML
      • TPL
      • TS
      • URL
      • VDW
      • VRT
      • WBS
      • WEBBOOKMARK
      • WEBLOC
      • WEBSITE
      • WHTT
      • WSDL
      • XAML
      • XD
      • XHT
      • XHTML
      • XML
      • XOJ
      • XOML
      • XSLT
      • XUL
      • ZUL
    • Formatos de archivo de procesamiento de textos
      • Formatos de archivo de procesamiento de texto
      • ASD
      • DOC
      • DOCM
      • DOCX
      • DOT
      • DOTM
      • DOTX
      • DSC
      • FAQ
      • FODT
      • IPYNB
      • LATEX
      • LTX
      • MAN
      • MD
      • ODM
      • ODT
      • OTT
      • QBL
      • QPF
      • RTF
      • TXT
      • WPD
      • WPS
    • visio
      • Formatos de archivo de Visio
      • VDW
      • VDX
      • VSD
      • VSDM
      • VSDX
      • VSS
      • VSSM
      • VSSX
      • VST
      • VSTM
      • VSTX
      • VSX
      • VTX
    1. Hogar
    2. Formatos de archivos web
    3. Sass

    What's on this Page

      • ¿Qué es un archivo SASS?
      • Por qué usar Sass
      • Cómo usar archivos SASS
        • Convertir una vez
        • Esté atento a los cambios
      • Sass Sintaxis
        • Variables
        • Anidamiento
        • Mezclas
        • Extender
        • Importar
      • Referencias

    ¿Qué es un archivo SASS?

    Sass (hojas de estilo sintácticamente asombrosas) es un lenguaje de secuencias de comandos de preprocesador. Se compila en CSS y se almacena con la extensión .sass. Sass consta de dos sintaxis, la original basada en sangrías que usa la extensión .sass y la SCSS más nueva con formato de bloque como CSS que usa la extensión .scss.

    Por qué usar Sass

    Sass es realmente útil para mantener estilos, ya que proporciona muchas funciones, como la introducción de variables, anidamiento, mezclas, importaciones y herencia de selectores que hacen que trabajar con estilos sea divertido.

    Cómo usar archivos SASS

    Los archivos SASS no se incluyen directamente en el documento HTML, sino que se convierten en archivos CSS que se incluyen en los archivos HTML. Puede instalar Sass en su sistema siguiendo las instrucciones proporcionadas en el [sitio oficial de Sass] (https://sass-lang.com/install).

    Sass se puede convertir a CSS ya sea convirtiendo un archivo SASS ya guardado o observando los cambios y convirtiendo a medida que se guarda el archivo. Los comandos para ambos se dan a continuación.

    Convertir una vez

    El primer parámetro del comando es el archivo SASS de origen y el segundo parámetro es el archivo CSS de salida.

    sass main.sass main.css
    

    Esté atento a los cambios

    El comando anterior se puede ejecutar con un indicador watch adicional que mantiene el comando en ejecución y tan pronto como se guarda el archivo Sass, se genera el CSS de salida.

    sass --watch main.sass main.css
    

    Sass Sintaxis

    Sass admite variables, anidamiento, mezclas, importaciones, herencia de selectores, etc. A continuación se muestran ejemplos de estas características.

    Variables

    Las variables se pueden usar para establecer información reutilizable, como el color principal o el relleno de un botón. Esto puede resultar útil si en el futuro necesita cambiar esa información, simplemente cámbiela en una ubicación y se actualiza en todas partes.

    Hablar con descaro a

    $primary-color: #47dff0
    $secondary-color: darken($primary-color, 50%)
    $margin: 16px
    
    .highlight
        border-color: $primary-color
        color: $secondary-color
    
    h1
        span
            margin: $margin / 2
        color: $secondary-color
    

    CSS generado

    .highlight {
      border-color: #47dff0;
      color: #042f34;
    }
    
    h1 {
      color: #042f34;
    }
    h1 span {
      margin: 8px;
    }
    

    Anidamiento

    Los selectores de CSS se pueden anidar de forma similar a la jerarquía de HTML. En el siguiente ejemplo, el tramo está anidado dentro del bloque h1.

    Hablar con descaro a

    $primary-color: #47dff0
    $secondary-color: darken($primary-color, 50%)
    $margin: 16px
    
    .highlight
        border-color: $primary-color
        color: $secondary-color
    
    h1
        span
            margin: $margin / 2
        color: $secondary-color
    

    CSS generado

    .highlight {
      border-color: #47dff0;
      color: #042f34;
    }
    
    h1 {
      color: #042f34;
    }
    h1 span {
      margin: 8px;
    }
    

    Mezclas

    Los mixins se usan para agrupar propiedades similares que se usan en varios lugares. Los mixins también admiten parámetros.

    Hablar con descaro a

    Declarando una mezcla

    // Simple
    =error-text
        color: red
        font-size: 25px
        font-weight: bold
        border: 1px solid black
        padding: 10px
    
    // With Parameter
    =message-text($color)
        color: $color
        font-size: 25px
        font-weight: bold
        border: 1px solid black
        padding: 10px
    

    Usando una mezcla

    .error
        +error-text()
    
    .success
        +message-text(green)
    
    .info
        +message-text(blue)
    

    CSS generado

    .error {
      color: red;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid black;
      padding: 10px;
    }
    
    .success {
      color: green;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid black;
      padding: 10px;
    }
    
    .info {
      color: blue;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid black;
      padding: 10px;
    }
    

    Extender

    Extend/Inheritance puede resultar útil en los casos en que las propiedades de un selector deben compartirse con otro selector. En el siguiente ejemplo, el selector .error-notice toma todas las propiedades del selector .error-text y agrega propiedades de borde y relleno.

    Hablar con descaro a

    .error-text
        color: red
        font-size: 25px
        font-weight: bold
    
    .error-notice
        @extend .error-text
        border: 1px solid black
        padding: 10px
    

    CSS generado

    .error-text, .error-notice {
      color: red;
      font-size: 25px;
      font-weight: bold;
    }
    
    .error-notice {
      border: 1px solid black;
      padding: 10px;
    }
    

    Importar

    La importación puede ser útil si estructura sus estilos en diferentes archivos según la funcionalidad o cualquier otra estructura que siga. Puede importar todos estos archivos en un archivo SASS principal que luego se convierte a CSS. Durante la importación, no necesita especificar la extensión del archivo en las instrucciones de importación. Sass compila todos los archivos SASS directamente. Para evitar que los archivos de importación se compilen directamente, puede hacerlos parciales agregando un guión bajo (_) al comienzo de su nombre. Los parciales se importan de forma similar a los archivos Sass normales.

    Hablar con descaro a

    @import "variables"
    @import "header-styles"
    @import "footer-styles"
    

    El CSS de salida tendrá los estilos de todos los archivos importados.

    Referencias

    • Sass - Wikipedia
    • Sass

    See Also

    • Formato de archivo RA
    • Formato de archivo KT
    • Formato de archivo AVIF
    • Formato de archivo JSON: ¿Qué es un archivo JSON?
    • Formato de archivo SCSS - Hoja de estilo en cascada Sass
     
     Español
    Close
     English
     Deutsch
     日本
     中文
     русский
     Français
     한국인
     Italiano
     Nederlands
     हिन्दी
     Indonesian
     Português
     عربي
     Türkçe
     Ελληνικά
     ไทย
     עִברִית
     Svenska
     українська
     Tiếng Việt
     български
     Magyar
     čeština
     Română
     Polski