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

    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
    • Форматы файлов изображений
      • Форматы файлов изображений
      • AFPHOTO
      • AFX
      • AGIF
      • AGP
      • AI
      • APNG
      • 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
    • Разные форматы файлов
      • Разные форматы файлов
      • 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
      • 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
    • Форматы файлов управления проектами
      • Форматы файлов управления проектами
      • 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. Sass

    What's on this Page

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

    .SASS вариант №

    Sass (синтаксически удивительные таблицы стилей) — это язык сценариев с препроцессором. Он скомпилирован в CSS и хранится с расширением .sass. Sass состоит из двух синтаксисов: исходный, основанный на отступах, который использует расширение .sass, и более новый SCSS с блочным форматированием, такой как CSS, который использует расширение .scss.

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

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

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

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

    Sass можно преобразовать в CSS либо путем преобразования уже сохраненного файла SASS, либо путем отслеживания изменений и преобразования по мере сохранения файла. Команды для обоих приведены ниже.

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

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

    sass main.sass main.css
    

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

    Приведенную выше команду можно запустить с дополнительным флагом watch, который поддерживает выполнение команды, и как только файл Sass будет сохранен, будет сгенерирован выходной CSS.

    sass --watch main.sass main.css
    

    Синтаксис Sass

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

    Переменные

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

    Сасс

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

    Сасс

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

    Миксины

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

    Сасс

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

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

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

    .error
        +error-text()
    
    .success
        +message-text(green)
    
    .info
        +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 и добавляет свойства границы и заполнения.

    Сасс

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

    Импорт

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

    Сасс

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

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

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

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

    See Also

    • Формат файла SCSS — каскадная таблица стилей 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