ドキュメンテーション

    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
      • 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
    • CAD ファイル形式
      • 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
    • 圧縮ファイル形式
      • 圧縮ファイル形式
      • 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
    • データベース
      • データベース ファイル形式
      • 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
    • ディスクとメディア
      • ディスクおよびメディア ファイル形式
      • BIN
      • CCD
      • CSO
      • CUE
      • GADGET
      • IMG
      • NKIT
      • NRG
      • 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
    • 実行可能
      • 実行ファイル形式
      • AHK
      • BAT
      • BTAPP
      • CGI
      • CMD
      • COM
      • EXE
      • IPA
      • MSI
      • MST
      • PIF
      • PYC
      • REG
      • WSF
      • WSH
      • XBE
      • XEX
    • ファイナンス
      • 財務ファイル形式
      • ABA
      • IXBRL
      • XBRL
    • フォント
      • フォント ファイル形式
      • BDF
      • CFF
      • CFF2
      • EOT
      • FNT
      • FON
      • JFPROJ
      • MFX
      • OTF
      • PFA
      • PFB
      • PFM
      • SFD
      • TTC
      • TTF
      • Type1
      • WOFF
    • ゲームのファイル形式
      • ゲームのファイル形式
      • 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
    • GIS ファイル形式
      • 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
    • 画像ファイル形式
      • 画像ファイル形式
      • 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
    • その他のファイル形式
      • その他のファイル形式
      • 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
    • メモを取るファイル形式
      • メモを取るファイル形式
      • 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
      • 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
      • 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
    • システム ファイル形式
      • システム ファイル形式
      • 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
      • TS
      • VID
      • VOB
      • VP6
      • VP8
      • VP9
      • VTT
      • WEBM
      • WMV
      • XVID
    • Web ファイル形式
      • 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
    • ワード プロセッシング ファイル形式
      • ワード プロセッシング ファイル形式
      • 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. Web ファイル形式
    3. Sass

    What's on this Page

      • .SASSファイルとは?
      • Sass を使用する理由
      • SASS ファイルの使用方法
        • 一度だけ変換
        • 変更に注意してください
      • Sass 構文
        • 変数
        • ネスティング
        • ミックスイン
      • 参照

    .SASSファイルとは?

    Sass (構文的に優れたスタイル シート) は、プリプロセッサ スクリプト言語です。 CSS にコンパイルされ、.sass 拡張子で保存されます。 Sass は、.sass 拡張子を使用するインデントに基づく元の構文と、.scss 拡張子を使用する CSS のようなブロック形式の新しい SCSS の 2 つの構文で構成されます。

    Sass を使用する理由

    Sass は、スタイルの操作を楽しくする変数、ネスト、ミックスイン、インポート、セレクター継承などの多くの機能を提供するため、スタイルの維持に非常に役立ちます。

    SASS ファイルの使用方法

    SASS ファイルは、HTML ドキュメントに直接含まれるのではなく、HTML ファイルに含まれる CSS ファイルに変換されます。 Official Sass Site の指示に従って、システムの Sass をインストールできます。

    Sass は、既に保存されている SASS ファイルを変換するか、ファイルの保存時に変更を監視して変換することにより、CSS に変換できます。両方のコマンドを以下に示します。

    一度だけ変換

    コマンドの最初のパラメーターはソース SASS ファイルで、2 番目のパラメーターは出力 CSS ファイルです。

    sass main.sass main.css
    

    変更に注意してください

    上記のコマンドは、コマンドの実行を維持する追加の watch フラグを使用して実行でき、Sass ファイルが保存されるとすぐに出力 CSS が生成されます。

    sass --watch main.sass main.css
    

    Sass 構文

    Sass は、変数、ネスト、ミックスイン、インポート、セレクターの継承などをサポートしています。これらの機能の例を以下に示します。

    変数

    変数を使用して、ボタンの原色やパディングなどの再利用可能な情報を設定できます。これは、将来その情報を変更する必要が生じた場合に役立ちます。1 つの場所で変更するだけで、すべての場所で更新されます。

    サス

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

    ### 拡張する ###

    拡張/継承は、1 つのセレクターのプロパティを別のセレクターと共有する必要がある場合に役立ちます。以下の例では、.error-notice セレクターは .error-text セレクターのすべてのプロパティを取得し、border および padding プロパティを追加します。

    サス

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

    ### 輸入 ###

    インポートは、機能または従うその他の構造に基づいてスタイルを異なるファイルに構造化する場合に役立ちます。これらのファイルはすべて、後で CSS に変換されるプライマリ SASS ファイルにインポートできます。インポート時には、インポート命令でファイル拡張子を指定する必要はありません。 Sass はすべての SASS ファイルを直接コンパイルします。インポート ファイルが直接コンパイルされるのを避けるために、名前の先頭にアンダースコア (_) を追加してパーシャルにすることができます。パーシャルは、通常の Sass ファイルと同様にインポートされます。

    サス

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

    出力 CSS には、インポートされたすべてのファイルのスタイルが含まれます。

    参照

    • サス - ウィキペディア
    • サス

    See Also

    • SCSS ファイル形式 - Sass カスケード スタイル シート
    • JS ファイル形式
    • PY ファイル形式
    • Xvid ファイル形式
    • SPC - ソフトウェア発行者証明書ファイル
     
     日本
    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