Документация

    Table of Content
    • Форматы 3D-файлов
      • Форматы 3D-файлов
      • 3D2
      • 3DM
      • 3DS
      • 3MF
      • AMF
      • ASE
      • B3D
      • DAE
      • DBM
      • DRC
      • E57
      • FBX
      • GLB
      • GLTF
      • IPT
      • JT
      • MA
      • MB
      • MP
      • OBJ
      • PLY
      • POV
      • PRC
      • RVM
      • STEP
      • STP
      • U3D
      • USD
      • USDZ
      • VRML
      • X
      • X3D
    • Форматы аудиофайлов
      • Форматы аудиофайлов
      • 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
    • Форматы файлов САПР
      • Форматы файлов САПР
      • 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
    • Форматы файлов сжатия
      • Форматы файлов сжатия
      • 7Z
      • ACE
      • ALZ
      • APK
      • APZ
      • ARC
      • ARJ
      • B1
      • B6Z
      • BKF
      • BNDL
      • BZ2
      • CIT
      • 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
      • P7Z
      • PAGES
      • PEA
      • PET
      • PF
      • PKG
      • PTK
      • PUP
      • RAR
      • RPM
      • RTE
      • S00
      • SFG
      • SIFZ
      • SIT
      • SITX
      • SY_
      • TAR
      • TBZ
      • TGS
      • TGZ
      • TPSR
      • TZ
      • VPK
      • WHL
      • WUX
      • XAPK
      • XAR
      • XPI
      • XZ
      • Z
      • ZIM
      • ZIP
      • ZIPX
      • ZL
      • ZST
    • База данных
      • Форматы файлов базы данных
      • 4DB
      • 4DD
      • ABCDDB
      • ACCDB
      • ACCDC
      • ACCDE
      • ACCDR
      • ACCDT
      • ACCDW
      • ACCFT
      • ADB
      • ADE
      • ADF
      • ADN
      • ADP
      • ALF
      • ANB
      • AQ
      • ASK
      • BAK
      • BCP
      • BTR
      • CAT
      • CDB
      • DACPAC
      • DAT
      • DB
      • DB-WAL
      • DB3
      • DBC
      • DBF
      • DBS
      • DDL
      • DLIS
      • DSN
      • DTSX
      • EPIM
      • FDB
      • FIC
      • FMP12
      • FMPSL
      • FP5
      • FP7
      • GDB
      • ITW
      • LDF
      • LOG
      • MDB
      • MDF
      • MYI
      • NDF
      • NSF
      • SAV
      • SDF
      • SQL
      • SQLITE
      • TE
      • TRC
      • TRM
      • UDL
      • WDB
    • Диск и носитель
      • Форматы дисков и медиафайлов
      • BIN
      • CCD
      • CSO
      • CUE
      • GADGET
      • IMG
      • MDF
      • MDS
      • NKIT
      • NRG
      • NRI
      • OVA
      • OVF
      • ROM
      • SDI
      • Toast
      • UDF
      • VCD
      • VDI
      • VHD
      • VHDX
      • WBFS
      • WIM
      • WUD
    • Форматы файлов электронных книг
      • Форматы файлов электронных книг
      • 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
    • Форматы файлов электронной почты
      • Форматы файлов электронной почты
      • EDB
      • EML
      • EMLX
      • ICS
      • MBOX
      • MSG
      • OFT
      • OLM
      • OST
      • P7S
      • PST
      • RPMSG
      • TNEF
      • VCF
    • Исполняемый
      • Форматы исполняемых файлов
      • AC
      • AHK
      • BAT
      • BTAPP
      • CGI
      • CMD
      • COM
      • EXE
      • IPA
      • MSI
      • MST
      • PIF
      • PYC
      • REG
      • WSF
      • WSH
      • XBE
      • XEX
    • Финансы
      • Форматы финансовых файлов
      • ABA
      • IXBRL
      • XBRL
    • Шрифт
      • Форматы файлов шрифтов
      • BDF
      • CFF
      • CFF2
      • EOT
      • ETX
      • FNT
      • FON
      • FOT
      • GXF
      • JFPROJ
      • MFX
      • ODTTF
      • OTF
      • PFA
      • PFB
      • PFM
      • SFD
      • TTC
      • TTF
      • Type1
      • VFB
      • VLW
      • WOFF
      • WOFF2
    • Форматы игровых файлов
      • Форматы игровых файлов
      • BMZ
      • BNS
      • BO2
      • CLIP
      • CON
      • CSD
      • CT
      • DEK
      • FOMOD
      • GAM
      • GBX
      • GCF
      • KODU
      • MCA
      • MCR
      • MCWORLD
      • MGX
      • MII
      • NPA
      • OSB
      • OSK
      • OSR
      • OSU
      • OSZ
      • PAK
      • PCC
      • PWF
      • REL
      • REP
      • RPX
      • SFAR
      • SID
      • SIMS3PACK
      • U8
      • UMX
      • USX
      • VPK
      • W3N
      • XS
    • Форматы файлов ГИС
      • Форматы файлов ГИС
      • 000
      • 3D
      • 3DD
      • 3DL
      • APL
      • APR
      • ATX
      • AUX
      • AVL
      • CXF
      • DEM
      • DIV
      • DLG
      • DT0
      • DT1
      • DT2
      • E00
      • EMBR
      • ETA
      • FIT
      • FMW
      • GeoJSON
      • GMAP
      • GML
      • GPKG
      • GPX
      • GSM
      • KML
      • KMZ
      • LOC
      • MID
      • MIF
      • MPK
      • MPS
      • MXD
      • MXT
      • NM2
      • NTF
      • OSC
      • OSM
      • PMF
      • PTM
      • QGD
      • QGS
      • QGZ
      • QLR
      • QML
      • SAF
      • SBN
      • SDF
      • SHP
      • SHX
      • SP3
      • SSF
      • TCX
      • TFRD
      • WLX
      • WOR
    • Форматы файлов изображений
      • Форматы файлов изображений
      • AI
      • APNG
      • 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
    • Разные форматы файлов
      • Разные форматы файлов
      • AML
      • BUP
      • CMS
      • CTG
      • DAP
      • ENL
      • ERR
      • GPG
      • H4
      • H5
      • ICA
      • KLQ
      • LOCK
      • LRC
      • MD5
      • MSO
      • OBB
      • ODF
      • OGG
      • PES
      • RIS
      • RML
      • SSP
      • TORRENT
      • VIM
      • VIMRC
      • XMP
      • XSMX
    • Обратите внимание на форматы файлов
      • Обратите внимание на форматы файлов
      • ONE
      • ONETOC2
    • Язык описания страницы
      • Язык описания страницы
      • 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
    • Форматы файлов презентаций
      • Форматы файлов презентаций
      • KEY
      • ODP
      • OTP
      • POT
      • POTM
      • POTX
      • PPS
      • PPSM
      • PPSX
      • PPT
      • PPTM
      • PPTX
    • Программирование
      • Программирование
      • ABC
      • ADDIN
      • 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
    • Форматы файлов управления проектами
      • Форматы файлов управления проектами
      • MPP
      • MPT
      • MPX
      • P6XML
      • XER
    • Форматы файлов издателя
      • Форматы файлов издателя
      • PUB
      • PUZ
    • Составление отчетов
      • Форматы файлов отчетов
      • MAR
      • RDL
      • RDLC
      • RPL
      • RPT
    • Форматы файлов электронных таблиц
      • Форматы файлов электронных таблиц
      • 123
      • 12M
      • _XLS
      • _XLSX
      • AST
      • AWS
      • BKS
      • CELL
      • CSV
      • CTS
      • DEF
      • DEX
      • DFG
      • DIF
      • DIS
      • EFU
      • ESS
      • FCS
      • FM
      • FODS
      • FP
      • GNM
      • GNUMERIC
      • IMP
      • NB
      • NUMBERS
      • NUMBERS-TEF
      • ODS
      • OTS
      • PMD
      • PMDX
      • PMVX
      • SDC
      • STC
      • SXC
      • TMV
      • TMVT
      • TSV
      • XL
      • XLA
      • XLAM
      • XLM
      • XLR
      • XLS
      • XLSB
      • XLSM
      • XLSMHTML
      • XLSX
      • XLT
      • XLTHTML
      • XLTM
      • XLTX
    • Форматы системных файлов
      • Форматы системных файлов
      • AML
      • ASV
      • CAB
      • CFG
      • CPG
      • CPL
      • DLL
      • DMP
      • DRV
      • ETL
      • HDMP
      • INI
      • INS
      • LNK
      • MDMP
      • SCR
      • SYS
      • TMP
    • Форматы видеофайлов
      • Форматы видеофайлов
      • 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
      • VID
      • VOB
      • VP6
      • VP8
      • VP9
      • VTT
      • WEBM
      • WMV
      • XVID
    • Форматы веб-файлов
      • Форматы веб-файлов
      • 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
      • CODASITE
      • CRDOWNLOAD
      • CRL
      • CRT
      • CSHTML
      • CSP
      • CSR
      • CSS
      • DAP
      • 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
      • KIT
      • LESS
      • MHT
      • MHTML
      • MJS
      • OBML
      • OBML15
      • OBML16
      • P7B
      • P7C
      • PAC
      • PART
      • PEM
      • PRO
      • RHTML
      • RJS
      • RSS
      • Sass
      • SCSS
      • SHTML
      • SPC
      • SSP
      • STML
      • TPL
      • URL
      • VRT
      • WBS
      • WEBBOOKMARK
      • WEBLOC
      • WEBSITE
      • WHTT
      • WSDL
      • XAML
      • XD
      • XHT
      • XHTML
      • XML
      • XOJ
      • XOML
      • XSLT
      • XUL
      • ZUL
    • Форматы файлов текстовых редакторов
      • Форматы файлов текстовых редакторов
      • 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
      • Форматы файлов Visio
      • VDW
      • VDX
      • VSD
      • VSDM
      • VSDX
      • VSS
      • VSSM
      • VSSX
      • VST
      • VSTM
      • VSTX
      • VSX
      • VTX
    1. Дом
    2. Форматы веб-файлов
    3. SCSS

    What's on this Page

      • .SCSS вариант №
      • Зачем использовать SCSS
      • Как использовать файлы SCSS
        • Преобразовать один раз
        • Следите за изменениями
      • Синтаксис SCSS
        • Переменные
        • Вложение
        • Миксины
        • Продлевать
        • Импорт
      • Использованная литература

    .SCSS вариант №

    SCSS — это второй синтаксис Sass (Syntactically Awesome Stylesheet), в котором вместо отступов используются скобки. SCSS был разработан таким образом, что действительный файл CSS3 также является действительным файлом SCSS. Файлы SCSS хранятся с расширением .scss.

    Зачем использовать SCSS

    Поскольку дизайн веб-сайтов становится все более сложным, это приводит к большим файлам CSS. Такие файлы сложнее поддерживать. Вот тут-то и появляется SCSS. SCSS вводит переменные, вложенность, примеси, импорт и наследование селекторов в разработке CSS. Эти дополнения делают работу с дизайном намного веселее.

    Как использовать файлы SCSS

    Файлы SCSS не включаются непосредственно в документ HTML, как CSS. Вместо этого файлы SCSS преобразуются в файлы CSS, которые включаются в файлы HTML. Чтобы установить SCSS в вашей системе, следуйте инструкциям на [Официальном сайте Sass] (https://sass-lang.com/install). Чтобы преобразовать SCSS в CSS, вы можете либо преобразовать уже сохраненный файл SCSS, либо следить за изменениями и преобразовывать по мере сохранения файла. Команды для обоих приведены ниже.

    Преобразовать один раз

    Первый параметр — это исходный файл SCSS, а второй параметр — выходной файл CSS.

    sass main.scss main.css
    

    Следите за изменениями

    У команды есть дополнительный флаг watch*, который поддерживает выполнение команды, и как только файл SCSS будет сохранен, будет сгенерирован выходной CSS.

    sass --watch main.scss main.css
    

    Синтаксис SCSS

    SCSS поддерживает переменные, вложенность, примеси, импорт, наследование селекторов и т. д. Ниже приведены примеры этих функций.

    Переменные

    Используя переменные, вы можете установить многократно используемую информацию, такую как основной цвет или цвет фона для кнопки сохранения. Это полезно, если вам нужно изменить эту информацию, вы просто меняете ее в одном месте, и она обновляется везде, где она используется.

    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

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

    Вложение

    Вы можете вкладывать селекторы CSS подобно иерархии HTML. В приведенном ниже примере диапазон вложен в блок 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

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

    Миксины

    Примеси можно использовать для группировки похожих свойств, которые используются вместе в нескольких местах. Вы также можете передавать параметры миксинам.

    SCSS

    Объявление миксина

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

    Использование миксина

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

    Сгенерированный CSS

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

    Продлевать

    Расширение/наследование полезно в тех случаях, когда свойства одного селектора необходимо использовать совместно с другим селектором. В приведенном ниже примере селектор .error-notice принимает все свойства селектора .error-text и добавляет свойства границы и заполнения.

    SCSS

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

    Сгенерированный CSS

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

    Импорт

    Импорт может быть полезен при разделении ответственности. Вы можете разделить стили таким образом, что стили заголовка находятся в отдельном файле, стили нижнего колонтитула — в отдельном файле, все цветовые переменные, используемые в стилях, могут быть в отдельном файле и т. д. Используя эту технику, стили остаются организованными. Вы просто импортируете файлы в свой основной файл SCSS, как показано в примере ниже. Вам не нужно указывать расширение файла в инструкции по импорту. Sass компилирует все файлы SCSS напрямую. Чтобы файлы импорта не компилировались напрямую, вы можете сделать их частичными, добавив подчеркивание (_) перед их именем. Вы можете импортировать частичные файлы, аналогичные обычным файлам SCSS, без подчеркивания.

    SCSS

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

    Выходной CSS будет содержать стили из всех импортированных файлов.

    Использованная литература

    • SCSS - Википедия
    • [Сасс] (https://sass-lang.com/)

    See Also

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