Documentazione

    Table of Content
    • Formati di file 3D
      • Formati di file 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
    • Formati di file audio
      • Formati di file 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
    • Formati di file CAD
      • Formati di file 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
    • Formati di file di compressione
      • Formati di file di compressione
      • 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
    • Banca dati
      • Formati di file di database
      • 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 e media
      • Formati di dischi e file multimediali
      • BIN
      • CCD
      • CSO
      • CUE
      • GADGET
      • IMG
      • NKIT
      • NRG
      • OVA
      • OVF
      • ROM
      • SDI
      • Toast
      • UDF
      • VCD
      • VDI
      • VHD
      • VHDX
      • WBFS
      • WIM
      • WUD
    • Formati di file di eBook
      • Formati di file di eBook
      • 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
    • Formati di file di posta elettronica
      • Formati di file di posta elettronica
      • EDB
      • EML
      • EMLX
      • ICS
      • MBOX
      • MSG
      • OFT
      • OLM
      • OST
      • P7S
      • PST
      • RPMSG
      • TNEF
      • VCF
    • Eseguibile
      • Formati di file eseguibili
      • AHK
      • BAT
      • BTAPP
      • CGI
      • CMD
      • COM
      • EXE
      • IPA
      • MSI
      • MST
      • PIF
      • PYC
      • REG
      • WSF
      • WSH
      • XBE
      • XEX
    • Finanza
      • Formati di file finanziari
      • ABA
      • IXBRL
      • XBRL
    • Font
      • Formati di file di caratteri
      • BDF
      • CFF
      • CFF2
      • EOT
      • FNT
      • FON
      • JFPROJ
      • MFX
      • OTF
      • PFA
      • PFB
      • PFM
      • SFD
      • TTC
      • TTF
      • Type1
      • WOFF
    • Formati di file di gioco
      • Formati di file di gioco
      • 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
    • Formati di file GIS
      • Formati di file 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
    • Formati di file immagine
      • Formati di file immagine
      • 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
    • Formati di file vari
      • Formati di file vari
      • 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
    • Nota prendere formati di file
      • Nota prendere formati di file
      • ONE
      • ONETOC2
    • Linguaggio di descrizione della pagina
      • Linguaggio di descrizione della pagina
      • 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
    • Formati di file di presentazione
      • Formati di file di presentazione
      • KEY
      • ODP
      • OTP
      • POT
      • POTM
      • POTX
      • PPS
      • PPSM
      • PPSX
      • PPT
      • PPTM
      • PPTX
    • Programmazione
      • Programmazione
      • 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
    • Formati di file di gestione del progetto
      • Formati di file di gestione del progetto
      • MPP
      • MPT
      • MPX
      • P6XML
      • XER
    • Formati di file dell'editore
      • Formati di file dell'editore
      • PUB
      • PUZ
    • Segnalazione
      • Formati di file di segnalazione
      • MAR
      • RDL
      • RDLC
      • RPL
      • RPT
    • Formati di file di fogli di calcolo
      • Formati di file di fogli di calcolo
      • 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
    • Formati di file di sistema
      • Formati di file di sistema
      • AML
      • ASV
      • CAB
      • CFG
      • CPG
      • CPL
      • DLL
      • DMP
      • DRV
      • ETL
      • HDMP
      • INI
      • INS
      • LNK
      • MDMP
      • SCR
      • SYS
      • TMP
    • Formati di file video
      • Formati di file video
      • 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
    • Formati di file Web
      • Formati di file 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
    • Formati di file di elaborazione testi
      • Formati di file di elaborazione testi
      • 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
      • Formati di file di Visio
      • VDW
      • VDX
      • VSD
      • VSDM
      • VSDX
      • VSS
      • VSSM
      • VSSX
      • VST
      • VSTM
      • VSTX
      • VSX
      • VTX
    1. Casa
    2. Formati di file Web
    3. SCSS

    What's on this Page

      • Che cos’è un file SCSS?
      • Perché usare SCSS
      • Come utilizzare i file SCSS
        • Converti una volta
        • Fai attenzione alle modifiche
      • Sintassi SCSS
        • Variabili
        • Nidificazione
        • Mixin
        • Estendi
        • Importa
      • Riferimenti

    Che cos’è un file SCSS?

    SCSS è la seconda sintassi di Sass (Syntacttically Awesome Stylesheet) che utilizza parentesi invece di rientri. SCSS è stato progettato in modo tale che un file CSS3 valido sia anche un file SCSS valido. I file SCSS vengono archiviati con l’estensione .scss.

    Perché usare SCSS

    Poiché i design dei siti Web stanno diventando complessi, risultando in file CSS di grandi dimensioni. Tali file sono più difficili da mantenere. È qui che entra in gioco SCSS. SCSS introduce variabili, annidamento, mixin, importazioni e ereditarietà del selettore nello sviluppo CSS. Queste aggiunte rendono il lavoro con il design molto più divertente.

    Come utilizzare i file SCSS

    I file SCSS non sono inclusi direttamente nel documento HTML come CSS. Al contrario, i file SCSS vengono convertiti in file CSS inclusi nei file HTML. Per installare SCSS sul tuo sistema, segui le istruzioni fornite sul Sito ufficiale Sass. Per convertire SCSS in CSS, puoi convertire un file SCSS già salvato o guardare le modifiche e convertire mentre il file viene salvato. I comandi per entrambi sono riportati di seguito.

    Converti una volta

    Il primo parametro è il file SCSS di origine e il secondo parametro è il file CSS di output.

    sass main.scss main.css
    

    Fai attenzione alle modifiche

    Il comando ha un flag aggiuntivo watch* che mantiene il comando in esecuzione e non appena il file SCSS viene salvato, viene generato il CSS di output.

    sass --watch main.scss main.css
    

    Sintassi SCSS

    SCSS supporta variabili, annidamento, mixin, importazioni, ereditarietà del selettore, ecc. Di seguito sono riportati esempi di queste funzionalità.

    Variabili

    Utilizzando le variabili, puoi impostare informazioni riutilizzabili come il colore primario o il colore di sfondo per il pulsante di salvataggio. Questo è utile se è necessario modificare tali informazioni, basta modificarle in una posizione e si aggiorna ovunque venga utilizzato.

    SCSS

    $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 generato

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

    Nidificazione

    Puoi annidare i selettori CSS in modo simile alla gerarchia dell’HTML. Nell’esempio riportato di seguito, la campata è nidificata all’interno del blocco h1.

    SCSS

    $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 generato

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

    Mixin

    I mixin possono essere utilizzati per raggruppare proprietà simili che vengono utilizzate insieme in più posizioni. Puoi anche passare i parametri ai mixin.

    SCSS

    Dichiarazione di un mixin

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

    Usare un mixin

    .error {
        @include error-text();
    }
    
    .success {
        @include message-text(green);
    }
    
    .info {
        @include message-text(blue);
    }
    

    CSS generato

    .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;
    }
    

    Estendi

    Estendi/Ereditarietà è utile nei casi in cui le proprietà di un selettore devono essere condivise con un altro selettore. Nell’esempio seguente, il selettore .error-notice prende tutte le proprietà del selettore .error-text e aggiunge le proprietà del bordo e del riempimento.

    SCSS

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

    CSS generato

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

    Importa

    L’importazione può essere utile nella separazione delle preoccupazioni. Puoi dividere gli stili in modo tale che gli stili di intestazione siano in un file separato, gli stili del piè di pagina siano in un file separato, tutte le variabili di colore utilizzate negli stili possano essere in un file separato, ecc. Usando questa tecnica, il gli stili rimangono organizzati. Importa semplicemente i file nel tuo file SCSS principale come mostrato nell’esempio seguente. Non è necessario specificare l’estensione del file nell’istruzione di importazione. Sass compila direttamente tutti i file SCSS. Per evitare che i file di importazione vengano compilati direttamente, puoi renderli parziali aggiungendo underscore(_) prima del loro nome. Puoi importare parziali simili ai normali file SCSS senza il carattere di sottolineatura.

    SCSS

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

    Il CSS di output avrà gli stili di tutti i file importati.

    Riferimenti

    • SCSS - Wikipedia
    • Sass

    See Also

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