Documentație

    Table of Content
    • Formate de fișiere 3D
      • Formate de fișiere 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
    • Formate de fișiere audio
      • Formate de fișiere 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
    • Formate de fișiere CAD
      • Formate de fișiere 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
    • Formate de fișiere de compresie
      • Formate de fișiere de compresie
      • 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
    • Bază de date
      • Formate de fișiere de bază de date
      • 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
    • Disc și Media
      • Formate de disc și fișiere media
      • BIN
      • CCD
      • CSO
      • CUE
      • GADGET
      • IMG
      • NKIT
      • NRG
      • OVA
      • OVF
      • ROM
      • SDI
      • Toast
      • UDF
      • VCD
      • VDI
      • VHD
      • VHDX
      • WBFS
      • WIM
      • WUD
    • Formate de fișiere de cărți electronice
      • Formate de fișiere de cărți electronice
      • 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
    • Formate de fișiere de e-mail
      • Formate de fișiere de e-mail
      • EDB
      • EML
      • EMLX
      • ICS
      • MBOX
      • MSG
      • OFT
      • OLM
      • OST
      • P7S
      • PST
      • RPMSG
      • TNEF
      • VCF
    • Executabil
      • Formate de fișiere executabile
      • AHK
      • BAT
      • BTAPP
      • CGI
      • CMD
      • COM
      • EXE
      • IPA
      • MSI
      • MST
      • PIF
      • PYC
      • REG
      • WSF
      • WSH
      • XBE
      • XEX
    • Finanţa
      • Formate de fișiere financiare
      • ABA
      • IXBRL
      • XBRL
    • Font
      • Formate de fișiere de font
      • BDF
      • CFF
      • CFF2
      • EOT
      • FNT
      • FON
      • JFPROJ
      • MFX
      • OTF
      • PFA
      • PFB
      • PFM
      • SFD
      • TTC
      • TTF
      • Type1
      • WOFF
    • Formate de fișiere de joc
      • Formate de fișiere de joc
      • BMZ
      • BNS
      • CLIP
      • CON
      • CSD
      • CT
      • DEK
      • FOMOD
      • GAM
      • KODU
      • MCWORLD
      • MGX
      • NPA
      • OSR
      • PAK
      • PCC
      • PSS
      • PUP
      • PWF
      • REL
      • REP
      • RPX
      • SAV
      • SFAR
      • SID
      • SIMS3PACK
      • U8
      • UMX
      • W3N
      • XS
    • Formate de fișiere GIS
      • Formate de fișiere 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
    • Formate de fișiere imagine
      • Formate de fișiere imagine
      • AFPHOTO
      • AFX
      • AGIF
      • AGP
      • AI
      • APNG
      • ART
      • AVIF
      • BIF
      • 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
      • JXL
      • 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
    • Diverse formate de fișiere
      • Diverse formate de fișiere
      • 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
    • Notă Luarea de formate de fișiere
      • Notă Luarea de formate de fișiere
      • ONE
      • ONETOC2
    • Limba de descriere a paginii
      • Limba de descriere a paginii
      • 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
    • Formate de fișiere de prezentare
      • Formate de fișiere de prezentare
      • KEY
      • ODP
      • OTP
      • POT
      • POTM
      • POTX
      • PPS
      • PPSM
      • PPSX
      • PPT
      • PPTM
      • PPTX
    • Programare
      • programare
      • ABC
      • ACD
      • ADDIN
      • ADS
      • AGI
      • AIA
      • AIDL
      • ALB
      • AML
      • ANE
      • APA
      • APKS
      • APPX
      • APPXBUNDLE
      • APPXUPLOAD
      • APS
      • ARSC
      • AS
      • AS2PROJ
      • AS3PROJ
      • ASC
      • ASI
      • ASM
      • ASVF
      • AU3
      • 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
    • Formate de fișiere de management de proiect
      • Formate de fișiere de management de proiect
      • MPP
      • MPT
      • MPX
      • P6XML
      • XER
    • Formate de fișiere pentru editor
      • Formate de fișiere pentru editor
      • PUB
      • PUZ
    • Raportare
      • Formate de fișiere de raportare
      • MAR
      • RDL
      • RDLC
      • RPL
      • RPT
    • Formate de fișiere pentru foi de calcul
      • Formate de fișiere pentru foi de calcul
      • 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
    • Formate de fișiere de sistem
      • Formate de fișiere de sistem
      • AML
      • ASV
      • CAB
      • CFG
      • CPG
      • CPL
      • DLL
      • DMP
      • DRV
      • ETL
      • HDMP
      • INI
      • INS
      • LNK
      • MDMP
      • SCR
      • SYS
      • TMP
    • Formate de fișiere video
      • Formate de fișiere 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
    • Formate de fișiere Visio
      • Formate de fișiere Visio
      • VDW
      • VDX
      • VSD
      • VSDM
      • VSDX
      • VSS
      • VSSM
      • VSSX
      • VST
      • VSTM
      • VSTX
      • VSX
      • VTX
    • Formate de fișiere web
      • Formate de fișiere 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
      • VRT
      • WBS
      • WEBBOOKMARK
      • WEBLOC
      • WEBSITE
      • WHTT
      • WSDL
      • XAML
      • XD
      • XHT
      • XHTML
      • XML
      • XOJ
      • XOML
      • XSLT
      • XUL
      • ZUL
    • Formate de fișiere de procesare a textului
      • Formate de fișiere de procesare a textului
      • ASD
      • DOC
      • DOCM
      • DOCX
      • DOT
      • DOTM
      • DOTX
      • DSC
      • FAQ
      • FODT
      • IPYNB
      • LATEX
      • LTX
      • MAN
      • MD
      • ODM
      • ODT
      • OTT
      • QBL
      • QPF
      • RTF
      • TXT
      • WPD
      • WPS
    1. Acasă
    2. Formate de fișiere web
    3. SCSS

    What's on this Page

      • Ce este un fișier SCSS?
      • De ce să folosiți SCSS
      • Cum se utilizează fișierele SCSS
        • Convertiți o dată
        • Urmăriți modificările
      • Sintaxa SCSS
        • Variabile
        • Cuibărire
        • Mixins
        • Extinde
        • Import
      • Referințe

    Ce este un fișier SCSS?

    SCSS este a doua sintaxă a Sass (Syntactically Awesome Stylesheet) care folosește paranteze în loc de indentări. SCSS a fost proiectat în așa fel încât un fișier CSS3 valid să fie și un fișier SCSS valid. Fișierele SCSS sunt stocate cu extensia .scss.

    De ce să folosiți SCSS

    Pe măsură ce design-urile site-urilor web devin complexe, rezultă fișiere CSS mari. Astfel de fișiere sunt mai greu de întreținut. Aici intervine SCSS. SCSS introduce variabile, imbricare, mixuri, importuri și moștenire a selectorului în dezvoltarea CSS. Aceste completări fac lucrul cu designul mult mai distractiv.

    Cum se utilizează fișierele SCSS

    Fișierele SCSS nu sunt incluse direct în documentul HTML, precum CSS. În schimb, fișierele SCSS sunt convertite în fișiere CSS care sunt incluse în fișierele HTML. Pentru a instala SCSS pe sistemul dvs., urmați instrucțiunile oferite pe site-ul oficial Sass. Pentru a converti SCSS în CSS, puteți fie să convertiți un fișier SCSS deja salvat, fie să urmăriți modificările și să le convertiți pe măsură ce fișierul este salvat. Comenzile pentru ambele sunt date mai jos.

    Convertiți o dată

    Primul parametru este fișierul SCSS sursă, iar al doilea parametru este fișierul CSS de ieșire.

    sass main.scss main.css
    

    Urmăriți modificările

    Comanda are un indicator suplimentar watch* care menține comanda să ruleze și de îndată ce fișierul SCSS este salvat, este generată CSS de ieșire.

    sass --watch main.scss main.css
    

    Sintaxa SCSS

    SCSS acceptă variabile, imbricare, mixin, importuri, moștenire selector, etc. Mai jos sunt date exemple ale acestor caracteristici.

    Variabile

    Prin utilizarea variabilelor, puteți seta informații reutilizabile, cum ar fi culoarea primară sau culoarea de fundal pentru butonul de salvare. Acest lucru este util dacă trebuie să modificați aceste informații, doar o schimbați într-o locație și se actualizează oriunde este folosită.

    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 generat

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

    Cuibărire

    Puteți imbrica selectoarele CSS similar cu ierarhia HTML. În exemplul de mai jos, intervalul este imbricat în interiorul blocului 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 generat

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

    Mixins

    Mixinele pot fi folosite pentru a grupa proprietăți similare împreună care sunt utilizate împreună în mai multe locuri. De asemenea, puteți transmite parametri mixin-urilor.

    SCSS

    Declararea unui 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;
    }
    

    Folosind un mixing

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

    CSS generat

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

    Extinde

    Extindere/Moștenire este utilă în cazurile în care proprietățile unui selector trebuie să fie partajate cu un alt selector. În exemplul de mai jos, selectorul .error-notice preia toate proprietățile selectorului .error-text și adaugă proprietăți de chenar și de umplutură.

    SCSS

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

    CSS generat

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

    Import

    Importul poate fi util în separarea preocupărilor. Puteți împărți stilurile în așa fel încât stilurile de antet să fie într-un fișier separat, stilurile de subsol să fie într-un fișier separat, toate variabilele de culoare utilizate în stiluri să poată fi într-un fișier separat etc. Folosind această tehnică, stilurile rămân organizate. Doar importați fișierele din fișierul SCSS principal, așa cum se arată în exemplul de mai jos. Nu trebuie să specificați extensia fișierului în instrucțiunea de import. Sass compilează toate fișierele SCSS direct. Pentru a evita compilarea directă a fișierelor de import, le puteți face parțiale adăugând caractere de subliniere (_) înaintea numelui lor. Puteți importa parțiale similare fișierelor SCSS normale fără caracterul de subliniere.

    SCSS

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

    Ieșirea CSS va avea stilurile din toate fișierele importate.

    Referințe

    • SCSS - Wikipedia
    • Sass

    See Also

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