CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="ko" dir="ltr"> <head> <meta charset="UTF-8"> <title>Sass (스타일시트 언어) - 위키백과, 우리 모두의 백과사전</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )kowikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"ko", "wgMonthNames":["","1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],"wgRequestId":"c89a301a-ec49-4acc-a797-c39f0bfd4b2a","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Sass_(스타일시트_언어)","wgTitle":"Sass (스타일시트 언어)","wgCurRevisionId":37295702,"wgRevisionId":37295702,"wgArticleId":1890611,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["해결되지 않은 속성이 있는 문서","위키데이터 속성 P154를 사용하는 문서","위키데이터 속성 P7859를 사용하는 문서","2006년 개발된 프로그래밍 언어","MIT 라이선스 소프트웨어","루비 (프로그래밍 언어)","스타일시트 언어","자유 라이브러리"],"wgPageViewLanguage":"ko","wgPageContentLanguage":"ko","wgPageContentModel":"wikitext","wgRelevantPageName":"Sass_(스타일시트_언어)","wgRelevantArticleId": 1890611,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"ko","pageLanguageDir":"ltr","pageVariantFallbacks":"ko"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":true,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgRelatedArticlesCompat":[],"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q1572865","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false, "wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.gadget.SectionFont":"ready","ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.directcommons","ext.gadget.edittools","ext.gadget.refToolbar","ext.gadget.siteNotice","ext.gadget.scrollUpButton","ext.gadget.strikethroughTOC","ext.gadget.switcher", "ext.gadget.WikiMiniAtlas","ext.gadget.Calculator","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.quicksurveys.init","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=ko&modules=ext.cite.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=ko&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=ko&modules=ext.gadget.SectionFont&only=styles&skin=vector-2022"> <link rel="stylesheet" href="/w/load.php?lang=ko&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/1200px-Sass_Logo_Color.svg.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="900"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/800px-Sass_Logo_Color.svg.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="600"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/640px-Sass_Logo_Color.svg.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="480"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Sass (스타일시트 언어) - 위키백과, 우리 모두의 백과사전"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//ko.m.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)"> <link rel="alternate" type="application/x-wiki" title="편집" href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="위키백과 (ko)"> <link rel="EditURI" type="application/rsd+xml" href="//ko.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.ko"> <link rel="alternate" type="application/atom+xml" title="위키백과 아톰 피드" href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EC%B5%9C%EA%B7%BC%EB%B0%94%EB%80%9C&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Sass_스타일시트_언어 rootpage-Sass_스타일시트_언어 skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">본문으로 이동</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="사이트"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="주 메뉴" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > 주 메뉴 </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">주 메뉴</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">사이드바로 이동</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">숨기기</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> 둘러보기 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%8C%80%EB%AC%B8" title="대문으로 가기 [z]" accesskey="z">대문</a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%EC%B5%9C%EA%B7%BC%EB%B0%94%EB%80%9C" title="위키의 최근 바뀐 목록 [r]" accesskey="r">최근 바뀜</a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/%ED%8F%AC%ED%84%B8:%EC%9A%94%EC%A6%98_%ED%99%94%EC%A0%9C" title="최근의 소식 알아 보기">요즘 화제</a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%EC%9E%84%EC%9D%98%EB%AC%B8%EC%84%9C" title="무작위로 선택된 문서 불러오기 [x]" accesskey="x">임의의 문서로</a></li> </ul> </div> </div> <div id="p-사용자_모임" class="vector-menu mw-portlet mw-portlet-사용자_모임" > <div class="vector-menu-heading"> 사용자 모임 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-projectchat" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%82%AC%EB%9E%91%EB%B0%A9">사랑방</a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%82%AC%EC%9A%A9%EC%9E%90_%EB%AA%A8%EC%9E%84" title="위키백과 참여자를 위한 토론/대화 공간입니다.">사용자 모임</a></li><li id="n-request" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%9A%94%EC%B2%AD">관리 요청</a></li> </ul> </div> </div> <div id="p-편집_안내" class="vector-menu mw-portlet mw-portlet-편집_안내" > <div class="vector-menu-heading"> 편집 안내 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-helpintro" class="mw-list-item"><a href="/wiki/%EB%8F%84%EC%9B%80%EB%A7%90:%EC%86%8C%EA%B0%9C">소개</a></li><li id="n-help" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%8F%84%EC%9B%80%EB%A7%90" title="도움말">도움말</a></li><li id="n-policy" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%A0%95%EC%B1%85%EA%B3%BC_%EC%A7%80%EC%B9%A8">정책과 지침</a></li><li id="n-qna" class="mw-list-item"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%A7%88%EB%AC%B8%EB%B0%A9">질문방</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%8C%80%EB%AC%B8" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <img class="mw-logo-wordmark" alt="위키백과" src="/static/images/mobile/copyright/wikipedia-wordmark-ko.svg" style="width: 7.5em; height: 1.75em;"> <img class="mw-logo-tagline" alt="" src="/static/images/mobile/copyright/wikipedia-tagline-ko.svg" width="120" height="13" style="width: 7.5em; height: 0.8125em;"> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/%ED%8A%B9%EC%88%98:%EA%B2%80%EC%83%89" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="위키백과 검색 [f]" accesskey="f"> 검색 </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="위키백과 검색" aria-label="위키백과 검색" autocapitalize="sentences" title="위키백과 검색 [f]" accesskey="f" id="searchInput" > </div> <input type="hidden" name="title" value="특수:검색"> </div> <button class="cdx-button cdx-search-input__end-button">검색</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="개인 도구"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="보이기"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="문서의 글꼴 크기, 폭, 색의 모습을 변경합니다" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="보이기" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > 보이기 </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_ko.wikipedia.org&uselang=ko" class="">기부</a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EA%B3%84%EC%A0%95%EB%A7%8C%EB%93%A4%EA%B8%B0&returnto=Sass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" title="계정을 만들고 로그인하는 것이 좋습니다. 하지만 필수는 아닙니다" class="">계정 만들기</a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EB%A1%9C%EA%B7%B8%EC%9D%B8&returnto=Sass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" title="위키백과에 로그인하면 여러가지 편리한 기능을 사용할 수 있습니다. [o]" accesskey="o" class="">로그인</a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="더 많은 옵션" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="개인 도구" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > 개인 도구 </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="사용자 메뉴" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_ko.wikipedia.org&uselang=ko">기부</a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EA%B3%84%EC%A0%95%EB%A7%8C%EB%93%A4%EA%B8%B0&returnto=Sass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" title="계정을 만들고 로그인하는 것이 좋습니다. 하지만 필수는 아닙니다"> 계정 만들기</a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EB%A1%9C%EA%B7%B8%EC%9D%B8&returnto=Sass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" title="위키백과에 로그인하면 여러가지 편리한 기능을 사용할 수 있습니다. [o]" accesskey="o"> 로그인</a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> 로그아웃한 편집자를 위한 문서 <a href="/wiki/%EB%8F%84%EC%9B%80%EB%A7%90:%EC%86%8C%EA%B0%9C" aria-label="편집에 관해 더 알아보기">더 알아보기</a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%EB%82%B4%EA%B8%B0%EC%97%AC" title="이 IP 주소의 편집 목록 [y]" accesskey="y">기여</a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%EB%82%B4%EC%82%AC%EC%9A%A9%EC%9E%90%ED%86%A0%EB%A1%A0" title="현재 사용하는 IP 주소에 대한 토론 문서 [n]" accesskey="n">토론</a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="사이트"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="목차" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">목차</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">사이드바로 이동</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">숨기기</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">처음 위치</div> </a> </li> <li id="toc-변수" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#변수"> <div class="vector-toc-text"> 1 변수 </div> </a> <ul id="toc-변수-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-네스팅" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#네스팅"> <div class="vector-toc-text"> 2 네스팅 </div> </a> <button aria-controls="toc-네스팅-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> 네스팅 하위섹션 토글하기 </button> <ul id="toc-네스팅-sublist" class="vector-toc-list"> <li id="toc-루프" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#루프"> <div class="vector-toc-text"> 2.1 루프 </div> </a> <ul id="toc-루프-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-인수" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#인수"> <div class="vector-toc-text"> 2.2 인수 </div> </a> <ul id="toc-인수-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-혼합" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#혼합"> <div class="vector-toc-text"> 2.3 혼합 </div> </a> <ul id="toc-혼합-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-셀렉터_상속" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#셀렉터_상속"> <div class="vector-toc-text"> 3 셀렉터 상속 </div> </a> <ul id="toc-셀렉터_상속-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-libSass" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#libSass"> <div class="vector-toc-text"> 4 libSass </div> </a> <ul id="toc-libSass-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-IDE_통합" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#IDE_통합"> <div class="vector-toc-text"> 5 IDE 통합 </div> </a> <ul id="toc-IDE_통합-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-같이_보기" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#같이_보기"> <div class="vector-toc-text"> 6 같이 보기 </div> </a> <ul id="toc-같이_보기-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-각주" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#각주"> <div class="vector-toc-text"> 7 각주 </div> </a> <ul id="toc-각주-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-외부_링크" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#외부_링크"> <div class="vector-toc-text"> 8 외부 링크 </div> </a> <ul id="toc-외부_링크-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="목차" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="목차 토글" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > 목차 토글 </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">Sass (스타일시트 언어)</h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="다른 언어로 문서를 방문합니다. 21개 언어로 읽을 수 있습니다" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-21" aria-hidden="true" > 21개 언어 </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%B3%D8%A7%D8%B3_(%D9%84%D8%BA%D8%A9_%D8%AA%D9%86%D8%B3%D9%8A%D9%82_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D8%A7%D9%84%D9%88%D9%8A%D8%A8)" title="ساس (لغة تنسيق صفحات الويب) – 아랍어" lang="ar" hreflang="ar" data-title="ساس (لغة تنسيق صفحات الويب)" data-language-autonym="العربية" data-language-local-name="아랍어" class="interlanguage-link-target">العربية</a></li><li class="interlanguage-link interwiki-az mw-list-item"><a href="https://az.wikipedia.org/wiki/Sass" title="Sass – 아제르바이잔어" lang="az" hreflang="az" data-title="Sass" data-language-autonym="Azərbaycanca" data-language-local-name="아제르바이잔어" class="interlanguage-link-target">Azərbaycanca</a></li><li class="interlanguage-link interwiki-bg mw-list-item"><a href="https://bg.wikipedia.org/wiki/SASS" title="SASS – 불가리아어" lang="bg" hreflang="bg" data-title="SASS" data-language-autonym="Български" data-language-local-name="불가리아어" class="interlanguage-link-target">Български</a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/Sass" title="Sass – 카탈로니아어" lang="ca" hreflang="ca" data-title="Sass" data-language-autonym="Català" data-language-local-name="카탈로니아어" class="interlanguage-link-target">Català</a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Sass_(Stylesheet-Sprache)" title="Sass (Stylesheet-Sprache) – 독일어" lang="de" hreflang="de" data-title="Sass (Stylesheet-Sprache)" data-language-autonym="Deutsch" data-language-local-name="독일어" class="interlanguage-link-target">Deutsch</a></li><li class="interlanguage-link interwiki-en mw-list-item"><a href="https://en.wikipedia.org/wiki/Sass_(style_sheet_language)" title="Sass (style sheet language) – 영어" lang="en" hreflang="en" data-title="Sass (style sheet language)" data-language-autonym="English" data-language-local-name="영어" class="interlanguage-link-target">English</a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/Sass" title="Sass – 스페인어" lang="es" hreflang="es" data-title="Sass" data-language-autonym="Español" data-language-local-name="스페인어" class="interlanguage-link-target">Español</a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/Sass_(stiililehe_keel)" title="Sass (stiililehe keel) – 에스토니아어" lang="et" hreflang="et" data-title="Sass (stiililehe keel)" data-language-autonym="Eesti" data-language-local-name="에스토니아어" class="interlanguage-link-target">Eesti</a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%B3%D8%A7%D8%B3_(%D8%B2%D8%A8%D8%A7%D9%86_%D8%B3%D8%A8%DA%A9_%D9%86%D9%88%DB%8C%D8%B3%DB%8C)" title="ساس (زبان سبک نویسی) – 페르시아어" lang="fa" hreflang="fa" data-title="ساس (زبان سبک نویسی)" data-language-autonym="فارسی" data-language-local-name="페르시아어" class="interlanguage-link-target">فارسی</a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Sass_(langage)" title="Sass (langage) – 프랑스어" lang="fr" hreflang="fr" data-title="Sass (langage)" data-language-autonym="Français" data-language-local-name="프랑스어" class="interlanguage-link-target">Français</a></li><li class="interlanguage-link interwiki-hy mw-list-item"><a href="https://hy.wikipedia.org/wiki/Sass" title="Sass – 아르메니아어" lang="hy" hreflang="hy" data-title="Sass" data-language-autonym="Հայերեն" data-language-local-name="아르메니아어" class="interlanguage-link-target">Հայերեն</a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikipedia.org/wiki/Sass" title="Sass – 이탈리아어" lang="it" hreflang="it" data-title="Sass" data-language-autonym="Italiano" data-language-local-name="이탈리아어" class="interlanguage-link-target">Italiano</a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/Sass" title="Sass – 일본어" lang="ja" hreflang="ja" data-title="Sass" data-language-autonym="日本語" data-language-local-name="일본어" class="interlanguage-link-target">日本語</a></li><li class="interlanguage-link interwiki-ml mw-list-item"><a href="https://ml.wikipedia.org/wiki/%E0%B4%B8%E0%B4%BE%E0%B4%B8%E0%B5%8D_(%E0%B4%B8%E0%B5%8D%E0%B4%B1%E0%B5%8D%E0%B4%B1%E0%B5%88%E0%B5%BD%E2%80%8C%E0%B4%B7%E0%B5%80%E0%B4%B1%E0%B5%8D%E0%B4%B1%E0%B5%8D_%E0%B4%AD%E0%B4%BE%E0%B4%B7)" title="സാസ് (സ്റ്റൈൽ‌ഷീറ്റ് ഭാഷ) – 말라얄람어" lang="ml" hreflang="ml" data-title="സാസ് (സ്റ്റൈൽ‌ഷീറ്റ് ഭാഷ)" data-language-autonym="മലയാളം" data-language-local-name="말라얄람어" class="interlanguage-link-target">മലയാളം</a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Sass_(linguagem_de_folhas_de_estilos)" title="Sass (linguagem de folhas de estilos) – 포르투갈어" lang="pt" hreflang="pt" data-title="Sass (linguagem de folhas de estilos)" data-language-autonym="Português" data-language-local-name="포르투갈어" class="interlanguage-link-target">Português</a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/Sass" title="Sass – 러시아어" lang="ru" hreflang="ru" data-title="Sass" data-language-autonym="Русский" data-language-local-name="러시아어" class="interlanguage-link-target">Русский</a></li><li class="interlanguage-link interwiki-sq mw-list-item"><a href="https://sq.wikipedia.org/wiki/Sass_(gjuh%C3%AB_p%C3%ABr_flet%C3%AB-stili)" title="Sass (gjuhë për fletë-stili) – 알바니아어" lang="sq" hreflang="sq" data-title="Sass (gjuhë për fletë-stili)" data-language-autonym="Shqip" data-language-local-name="알바니아어" class="interlanguage-link-target">Shqip</a></li><li class="interlanguage-link interwiki-sr mw-list-item"><a href="https://sr.wikipedia.org/wiki/Sass_(%D1%81%D1%82%D0%B8%D0%BB%D1%81%D0%BA%D0%B8_%D1%98%D0%B5%D0%B7%D0%B8%D0%BA)" title="Sass (стилски језик) – 세르비아어" lang="sr" hreflang="sr" data-title="Sass (стилски језик)" data-language-autonym="Српски / srpski" data-language-local-name="세르비아어" class="interlanguage-link-target">Српски / srpski</a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/SASS" title="SASS – 터키어" lang="tr" hreflang="tr" data-title="SASS" data-language-autonym="Türkçe" data-language-local-name="터키어" class="interlanguage-link-target">Türkçe</a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/Sass" title="Sass – 우크라이나어" lang="uk" hreflang="uk" data-title="Sass" data-language-autonym="Українська" data-language-local-name="우크라이나어" class="interlanguage-link-target">Українська</a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/Sass" title="Sass – 중국어" lang="zh" hreflang="zh" data-title="Sass" data-language-autonym="中文" data-language-local-name="중국어" class="interlanguage-link-target">中文</a></li> </ul> <div class="after-portlet after-portlet-lang"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q1572865#sitelinks-wikipedia" title="언어 간 링크 편집" class="wbc-editpage">링크 편집</a></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="이름공간"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" title="본문 보기 [c]" accesskey="c">문서</a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/%ED%86%A0%EB%A1%A0:Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" rel="discussion" title="문서의 내용에 대한 토론 문서 [t]" accesskey="t">토론</a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="언어 변종 바꾸기" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >한국어 </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="보기"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)">읽기</a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit" title="이 문서의 원본 코드를 편집 [e]" accesskey="e">편집</a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=history" title="이 문서의 과거 편집 내역입니다. [h]" accesskey="h">역사 보기</a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="페이지 도구"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="도구" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >도구 </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">도구</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">사이드바로 이동</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">숨기기</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="더 많은 옵션" > <div class="vector-menu-heading"> 동작 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)">읽기</a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit" title="이 문서의 원본 코드를 편집 [e]" accesskey="e">편집</a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=history">역사 보기</a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> 일반 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%EA%B0%80%EB%A6%AC%ED%82%A4%EB%8A%94%EB%AC%B8%EC%84%9C/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" title="여기를 가리키는 모든 위키 문서의 목록 [j]" accesskey="j">여기를 가리키는 문서</a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%EB%A7%81%ED%81%AC%EC%B5%9C%EA%B7%BC%EB%B0%94%EB%80%9C/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" rel="nofollow" title="이 문서에서 링크한 문서의 최근 바뀜 [k]" accesskey="k">가리키는 글의 최근 바뀜</a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/위키백과:파일_올리기" title="파일 올리기 [u]" accesskey="u">파일 올리기</a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/%ED%8A%B9%EC%88%98:%ED%8A%B9%EC%88%98%EB%AC%B8%EC%84%9C" title="모든 특수 문서의 목록 [q]" accesskey="q">특수 문서 목록</a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&oldid=37295702" title="이 문서의 이 판에 대한 고유 링크">고유 링크</a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=info" title="이 문서에 대한 자세한 정보">문서 정보</a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EC%9D%B4%EB%AC%B8%EC%84%9C%EC%9D%B8%EC%9A%A9&page=Sass_%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4%29&id=37295702&wpFormIdentifier=titleform" title="이 문서를 인용하는 방법에 대한 정보">이 문서 인용하기</a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:UrlShortener&url=https%3A%2F%2Fko.wikipedia.org%2Fwiki%2FSass_%28%25EC%258A%25A4%25ED%2583%2580%25EC%259D%25BC%25EC%258B%259C%25ED%258A%25B8_%25EC%2596%25B8%25EC%2596%25B4%29">축약된 URL 얻기</a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:QrCode&url=https%3A%2F%2Fko.wikipedia.org%2Fwiki%2FSass_%28%25EC%258A%25A4%25ED%2583%2580%25EC%259D%25BC%25EC%258B%259C%25ED%258A%25B8_%25EC%2596%25B8%25EC%2596%25B4%29">QR 코드 다운로드</a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> 인쇄/내보내기 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:%EC%B1%85&bookcmd=book_creator&referer=Sass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29">책 만들기</a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=%ED%8A%B9%EC%88%98:DownloadAsPdf&page=Sass_%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4%29&action=show-download-screen">PDF로 다운로드</a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&printable=yes" title="이 문서의 인쇄용 판 [p]" accesskey="p">인쇄용 판</a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> 다른 프로젝트 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q1572865" title="데이터 저장소에 연결된 항목을 가리키는 링크 [g]" accesskey="g">위키데이터 항목</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="페이지 도구"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="보이기"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">보이기</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">사이드바로 이동</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">숨기기</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">위키백과, 우리 모두의 백과사전.</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="ko" dir="ltr"> <style data-mw-deduplicate="TemplateStyles:r34311307">.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}body.skin-minerva .mw-parser-output .infobox-header,body.skin-minerva .mw-parser-output .infobox-subheader,body.skin-minerva .mw-parser-output .infobox-above,body.skin-minerva .mw-parser-output .infobox-title,body.skin-minerva .mw-parser-output .infobox-image,body.skin-minerva .mw-parser-output .infobox-full-data,body.skin-minerva .mw-parser-output .infobox-below{text-align:center}</style><table class="infobox vevent"><caption class="infobox-title summary">Sass</caption><tbody><tr><td colspan="2" class="infobox-image"><a href="/wiki/%ED%8C%8C%EC%9D%BC:Sass_Logo_Color.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/220px-Sass_Logo_Color.svg.png" decoding="async" width="220" height="165" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/330px-Sass_Logo_Color.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/440px-Sass_Logo_Color.svg.png 2x" data-file-width="512" data-file-height="384" /></a></td></tr><tr><th scope="row" class="infobox-label"><a href="/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%84%A4%EA%B3%84" title="소프트웨어 설계">설계자</a></th><td class="infobox-data"><a href="/w/index.php?title=%ED%96%84%ED%8A%BC_%EC%BA%90%ED%8B%80%EB%A6%B0&action=edit&redlink=1" class="new" title="햄튼 캐틀린 (없는 문서)">햄튼 캐틀린</a></td></tr><tr><th scope="row" class="infobox-label"><a href="/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8" title="프로그래머">개발자</a></th><td class="infobox-data organiser">Natalie Weizenbaum, Chris Eppstein</td></tr><tr><th scope="row" class="infobox-label">발표일</th><td class="infobox-data">2006년 11월 28일(18년 전)(2006-11-28)</td></tr><tr><th scope="row" class="infobox-label">최근 버전</th><td class="infobox-data">1.54.0<a href="#cite_note-latest-release-1">[1]</a></td></tr><tr><th scope="row" class="infobox-label">최근 버전 출시일</th><td class="infobox-data">2022년 7월 7일(2년 전)(2022-07-07)<a href="#cite_note-latest-release-1">[1]</a></td></tr><tr><th scope="row" class="infobox-label"><a href="/wiki/%EC%9E%90%EB%A3%8C%ED%98%95_%EC%B2%B4%EA%B3%84" title="자료형 체계">자료형 체계</a></th><td class="infobox-data"><a href="/wiki/%EB%8F%99%EC%A0%81_%ED%83%80%EC%9D%B4%ED%95%91" class="mw-redirect" title="동적 타이핑">동적</a></td></tr><tr><th scope="row" class="infobox-label"><a href="/wiki/%EC%9A%B4%EC%98%81_%EC%B2%B4%EC%A0%9C" class="mw-redirect" title="운영 체제">운영 체제</a></th><td class="infobox-data"><a href="/wiki/%ED%81%AC%EB%A1%9C%EC%8A%A4_%ED%94%8C%EB%9E%AB%ED%8F%BC" title="크로스 플랫폼">크로스 플랫폼</a></td></tr><tr><th scope="row" class="infobox-label"><a href="/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%82%AC%EC%9A%A9%EA%B6%8C" title="소프트웨어 사용권">라이선스</a></th><td class="infobox-data"><a href="/wiki/MIT_%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4" class="mw-redirect" title="MIT 라이선스">MIT 라이선스</a></td></tr><tr><th scope="row" class="infobox-label"><a href="/wiki/%ED%8C%8C%EC%9D%BC_%ED%99%95%EC%9E%A5%EC%9E%90" title="파일 확장자">파일 확장자</a></th><td class="infobox-data">.sass, .scss</td></tr><tr><th scope="row" class="infobox-label">웹사이트</th><td class="infobox-data"><a rel="nofollow" class="external text" href="https://sass-lang.com/">sass-lang.com</a></td></tr><tr><th colspan="2" class="infobox-header" style="background-color: #eee;">주요 <a href="/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4_%EA%B5%AC%ED%98%84%EC%B2%B4" title="프로그래밍 언어 구현체">구현체</a></th></tr><tr><td colspan="2" class="infobox-full-data"><a href="/wiki/%EB%8B%A4%ED%8A%B8_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="다트 (프로그래밍 언어)">다트</a>, <a href="/wiki/%EB%A3%A8%EB%B9%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="루비 (프로그래밍 언어)">루비</a></td></tr><tr><th colspan="2" class="infobox-header" style="background-color: #eee;">영향을 받은 언어</th></tr><tr><td colspan="2" class="infobox-full-data"><a href="/wiki/CSS" title="CSS">CSS</a> (모두 "들여쓰기" 및 SCSS) <a href="/wiki/YAML" title="YAML">YAML</a> 및 <a href="/w/index.php?title=Haml&action=edit&redlink=1" class="new" title="Haml (없는 문서)">Haml</a> (들여쓰기 문법) Less (SCSS)</td></tr><tr><th colspan="2" class="infobox-header" style="background-color: #eee;">영향을 준 언어</th></tr><tr><td colspan="2" class="infobox-full-data"><a href="/wiki/Less_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" title="Less (스타일시트 언어)">Less</a>, <a href="/wiki/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%9F%AC%EC%8A%A4_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" title="스타일러스 (스타일시트 언어)">스타일러스</a>, <a href="/w/index.php?title=%ED%8A%B8%EB%A6%AC%ED%8A%AC_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)&action=edit&redlink=1" class="new" title="트리튬 (프로그래밍 언어) (없는 문서)">트리튬</a>, <a href="/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)" class="mw-redirect" title="부트스트랩 (프런트엔드 프레임워크)">부트스트랩 (v4+)</a></td></tr></tbody></table> Sass(syntactically awesome stylesheets, 사스)는 <a href="/w/index.php?title=%ED%96%84%ED%8A%BC_%EC%BA%90%ED%8B%80%EB%A6%B0&action=edit&redlink=1" class="new" title="햄튼 캐틀린 (없는 문서)">햄튼 캐틀린</a>이 설계하고 <a href="/w/index.php?title=%EB%82%98%ED%83%88%EB%A6%AC_%EB%B0%94%EC%9D%B4%EC%B2%B8%EB%B0%94%EC%9B%80&action=edit&redlink=1" class="new" title="나탈리 바이첸바움 (없는 문서)">나탈리 바이첸바움</a>이 개발한 <a href="/w/index.php?title=%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4&action=edit&redlink=1" class="new" title="스타일시트 언어 (없는 문서)">스타일시트 언어</a>이다.<a href="#cite_note-about-2">[2]</a><a href="#cite_note-3">[3]</a> 초기 버전들 이후에 바이첸바움과 <a href="/w/index.php?title=%ED%81%AC%EB%A6%AC%EC%8A%A4_%EC%97%A1%EC%8A%A4%ED%83%80%EC%9D%B8&action=edit&redlink=1" class="new" title="크리스 엡스타인 (없는 문서)">크리스 엡스타인</a>은 Sass 파일에 쓰이는 단순 스크립팅 언어인 SassScript로 Sass의 확장을 계속하였다. Sass는 <a href="/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8" class="mw-redirect" title="종속형 시트">종속형 시트</a>(CSS)로 <a href="/wiki/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%8A%B8_%EC%96%B8%EC%96%B4" title="인터프리트 언어">해석</a> 및 <a href="/wiki/%EC%BB%B4%ED%8C%8C%EC%9D%BC_%EC%96%B8%EC%96%B4" title="컴파일 언어">컴파일</a>되는 <a href="/wiki/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4" title="스크립트 언어">스크립트 언어</a>이다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지 신택스로 구성되어 있다. 인덴티드 신택스(indented syntax)라는 이름의 원래의 신택스는 <a href="/w/index.php?title=Haml&action=edit&redlink=1" class="new" title="Haml (없는 문서)">Haml</a>과 비슷한 신택스를 사용한다.<a href="#cite_note-main-4">[4]</a> 규칙 분리를 위해 <a href="/wiki/%EB%93%A4%EC%97%AC%EC%93%B0%EA%B8%B0_%EB%B0%A9%EC%8B%9D" title="들여쓰기 방식">들여쓰기</a>를 사용하여 코드 블록과 <a href="/wiki/%EC%83%88%EC%A4%84_%EB%AC%B8%EC%9E%90" title="새줄 문자">새줄 문자</a>를 구분한다. 새로운 신택스 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용한다. 블록 안의 줄을 구분하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지한다. 인덴티드 신택스와 SCSS 파일들은 전통적으로 각각 .sass, .scss <a href="/wiki/%ED%8C%8C%EC%9D%BC_%ED%99%95%EC%9E%A5%EC%9E%90" title="파일 확장자">확장자</a>를 가진다. <a href="/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8" class="mw-redirect" title="종속형 시트">CSS3</a>는 이들에 적용할 규칙을 묶는 일련의 셀렉터와 의사 셀렉터(pseudo-selector)들로 구성된다. Sass<a href="#cite_note-5">[5]</a>(두 신택스에 해당)는 특히 <a href="/wiki/%EA%B0%9D%EC%B2%B4_%EC%A7%80%ED%96%A5_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D" title="객체 지향 프로그래밍">객체 지향 언어</a>와 같은 더 전통적인 <a href="/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4" title="프로그래밍 언어">프로그래밍 언어</a>에서 사용 가능하면서도 CSS3 자체적으로는 이용이 불가능한 여러 매커니즘을 제공함으로써 CSS를 확장한다. SassScript이 해석될 때 Sass 파일에 정의된 여러 셀렉터를 위한 CSS 규칙 블록을 만들어낸다. Sass 인터프리터는 SassScript를 CSS로 변환한다. 아니면 Sass는 .sass나 .scss 파일을 모니터링하다가 .sass 또는 .scss 파일이 저장될 때마다.css 파일로 변환, 출력할 수 있다.<a href="#cite_note-tutorial-6">[6]</a> Sass는 CSS를 위한 <a href="/wiki/%EC%8B%A0%ED%83%9D%ED%8B%B1_%EC%8A%88%EA%B1%B0" title="신택틱 슈거">신택틱 슈거</a>라 할 수 있다. Sass 공식 구현체는 <a href="/wiki/%EC%98%A4%ED%94%88_%EC%86%8C%EC%8A%A4_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4" title="오픈 소스 소프트웨어">오픈 소스</a>이며 <a href="/wiki/%EB%A3%A8%EB%B9%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="루비 (프로그래밍 언어)">루비</a>로 코딩되어 있다. 그러나 <a href="/wiki/%EB%8B%A4%ED%8A%B8_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="다트 (프로그래밍 언어)">다트</a>, <a href="/wiki/PHP" title="PHP">PHP</a>, 또 libSass라는 이름의 <a href="/wiki/C_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="C (프로그래밍 언어)">C</a>의 고성능 구현체를 포함하여 다른 구현체들도 존재한다.<a href="#cite_note-7">[7]</a><a href="#cite_note-libsass-html5conf-8">[8]</a> 또, JSass라는 이름의 <a href="/wiki/%EC%9E%90%EB%B0%94_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="자바 (프로그래밍 언어)">자바</a> 구현체도 있다.<a href="#cite_note-9">[9]</a> 게다가 <a href="/w/index.php?title=Vaadin&action=edit&redlink=1" class="new" title="Vaadin (없는 문서)">Vaadin</a>은 Sass의 자바 구현체를 포함하고 있다.<a href="#cite_note-10">[10]</a> 인덴티드 신택스는 메타 언어이다. SCSS는 <a href="/wiki/%EB%A9%94%ED%83%80_%EC%96%B8%EC%96%B4" title="메타 언어">네스티드 메타 언어</a>인데, 유효한 CSS가 동일한 시맨틱스를 포함하고 있는 유효한 SCSS이다. Sass는 <a href="/wiki/%EB%AA%A8%EC%A7%88%EB%9D%BC_%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4" title="모질라 파이어폭스">모질라 파이어폭스</a> 확장 기능 <a href="/wiki/%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%84%EA%B7%B8" class="mw-disambig" title="파이어버그">파이어버그</a>와의 통합을 지원한다.<a href="#cite_note-doc-11">[11]</a> SassScript는 다음의 매커니즘을 제공한다: 변수, 네스팅, <a href="/wiki/Mixin" class="mw-redirect" title="Mixin">mixin</a>, 셀렉터 상속.<a href="#cite_note-main-4">[4]</a> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="변수">변수</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=1" title="부분 편집: 변수">편집</a>]</div> Sass는 변수 정의를 허용한다. 변수는 <a href="/wiki/$" title="$">$</a> (<code>$</code>)로 시작할 수 있다. 변수 할당은 <a href="/wiki/%EC%BD%9C%EB%A1%A0" class="mw-disambig" title="콜론">콜론</a>(<code>:</code>)으로 마무리한다.<a href="#cite_note-doc-11">[11]</a> SassScript는 4가지 자료형을 지원한다:<a href="#cite_note-doc-11">[11]</a> <ul><li><a href="/wiki/%EC%88%98_(%EC%88%98%ED%95%99)" title="수 (수학)">수</a> (단위 포함)</li> <li><a href="/wiki/%EB%AC%B8%EC%9E%90%EC%97%B4" title="문자열">문자열</a> (인용 부호가 있거나 없이)</li> <li>컬러 (하나 이상의 이름)</li> <li><a href="/wiki/%EB%B6%88%EB%A6%AC%EC%96%B8_%EC%9E%90%EB%A3%8C%ED%98%95" title="불리언 자료형">불리언</a></li></ul> 변수는 사용 가능한 여러 <a href="/wiki/%ED%95%A8%EC%88%98_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)" class="mw-redirect" title="함수 (프로그래밍)">함수</a>들 가운데 하나에 대해 <a href="/wiki/%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98_(%EC%BB%B4%ED%93%A8%ED%84%B0_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)" title="매개변수 (컴퓨터 프로그래밍)">매개변수</a>로 사용하거나 결과물이 될 수 있다.<a href="#cite_note-functions-12">[12]</a> 변환 과정 중에 변수의 값들은 출력 CSS 문서에 삽입된다.<a href="#cite_note-main-4">[4]</a> SCSS 스타일: <div class="mw-highlight mw-highlight-lang-scss mw-content-ltr" dir="ltr"><pre>$primary-color: #3bbfce; $margin: 16px; .content-navigation { border-color: $primary-color; color: darken($primary-color, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $primary-color; } </pre></div> Sass 스타일: <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>$primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color </pre></div> 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } </pre></div> <div class="mw-heading mw-heading2"><h2 id="네스팅">네스팅</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=2" title="부분 편집: 네스팅">편집</a>]</div> CSS는 논리적인 네스팅을 지원하지만 코드 블록 자체는 네스팅되지 않는다. Sass는 서로 간에 네스팅된 코드를 삽입할 수 있게 한다.<a href="#cite_note-main-4">[4]</a> Sass 스타일: <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>table.hl margin: 2em 0 td.ln text-align: right li font: family: serif weight: bold size: 1.3em </pre></div> SCSS 스타일: <div class="mw-highlight mw-highlight-lang-scss mw-content-ltr" dir="ltr"><pre>table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.3em; } } </pre></div> 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.3em; } </pre></div> <a href="/wiki/%EC%9D%B4%EB%A6%84%EA%B3%B5%EA%B0%84" title="이름공간">이름공간</a> 네스팅 및 부모 참조를 포함한 더 복잡한 유형의 네스팅은 Sass 문서에서 논하고 있다.<a href="#cite_note-doc-11">[11]</a> <div class="mw-highlight mw-highlight-lang-scss mw-content-ltr" dir="ltr"><pre>@mixin table-base { th { text-align: center; font-weight: bold; } td, th { padding: 2px; } } #data { @include table-base; } </pre></div> Sass 스타일: <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>=table-base th text-align: center font-weight: bold td, th padding: 2px #data +table-base </pre></div> 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } </pre></div> <div class="mw-heading mw-heading3"><h3 id="루프">루프</h3>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=3" title="부분 편집: 루프">편집</a>]</div> Sass는 <code class="mw-highlight mw-highlight-lang-sass mw-content-ltr" style="" dir="ltr">@for</code>, <code class="mw-highlight mw-highlight-lang-sass mw-content-ltr" style="" dir="ltr">@each</code>, <code class="mw-highlight mw-highlight-lang-sass mw-content-ltr" style="" dir="ltr">@while</code>를 사용하여 변수에 대한 루프를 지원하며, 비슷한 클래스나 id를 가진 요소들에 각기 다른 스타일을 적용하기 위해 사용할 수 있다. <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>$squareCount: 3 @for $i from 1 through $squareCount #square-#{$i} background-color: red width: 50px * $i height: 120px / $i </pre></div> 위의 예의 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#square-1 { background-color: red; width: 50px; height: 120px; } #square-2 { background-color: red; width: 100px; height: 60px; } #square-3 { background-color: red; width: 150px; height: 40px; } </pre></div> <div class="mw-heading mw-heading3"><h3 id="인수">인수</h3>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=4" title="부분 편집: 인수">편집</a>]</div> Mixins은 또한 인수를 지원한다.<a href="#cite_note-main-4">[4]</a> <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>=left($dist) float: left margin-left: $dist #data +left(10px) </pre></div> 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#data { float: left; margin-left: 10px; } </pre></div> <div class="mw-heading mw-heading3"><h3 id="혼합">혼합</h3>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=5" title="부분 편집: 혼합">편집</a>]</div> <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>=table-base th text-align: center font-weight: bold td, th padding: 2px =left($dist) float: left margin-left: $dist #data +left(10px) +table-base </pre></div> 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } </pre></div> <div class="mw-heading mw-heading2"><h2 id="셀렉터_상속">셀렉터 상속</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=6" title="부분 편집: 셀렉터 상속">편집</a>]</div> CSS3는 <a href="/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8" title="문서 객체 모델">문서 객체 모델</a>(DOM) 계층을 지원하지만 셀렉터 상속을 허용하지 않는다. Sass에서 상속은 @extend 키워드를 사용하고 다른 셀렉터를 참조하는 코드 블록 내 줄을 삽입함으로써 수행된다. 이 확장된 셀렉터의 속성은 호출을 하는 셀렉터에 적용된다.<a href="#cite_note-main-4">[4]</a> <div class="mw-highlight mw-highlight-lang-sass mw-content-ltr" dir="ltr"><pre>.error border: 1px #f00 background: #fdd .error.intrusion font-size: 1.3em font-weight: bold .badError @extend .error border-width: 3px </pre></div> 컴파일 결과: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; } </pre></div> Sass는 <a href="/wiki/%EB%8B%A4%EC%A4%91_%EC%83%81%EC%86%8D" title="다중 상속">다중 상속</a>을 지원한다.<a href="#cite_note-doc-11">[11]</a> <div class="mw-heading mw-heading2"><h2 id="libSass">libSass</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=7" title="부분 편집: libSass">편집</a>]</div> 2012년에 HTML5 개발자 콘퍼런스에서 Sass의 개발자 햄튼 캐틀린은 <a href="/w/index.php?title=%EB%AC%B4%EB%B8%8C%EC%9B%B9&action=edit&redlink=1" class="new" title="무브웹 (없는 문서)">무브웹</a>의 엔지니어링 팀, 캐틀린, Aaron Leung이 개발한 Sass의 오픈 소스 C++ 구현체 libSass의 버전 1.0을 발표하였다.<a href="#cite_note-libsass-html5conf-8">[8]</a><a href="#cite_note-libsass-moovweb-blog-13">[13]</a> 현재의 Sass 유지보수자 크리스 엡스타인 또한 기여할 의도가 있음을 내비쳤다.<a href="#cite_note-14">[14]</a> 캐틀린에 따르면 "libSass는 아무 곳에나 던져 넣으면 Sass가 들어간다... 오늘날에는 파이어폭스에 바로 넣어서 파이어폭스를 빌드하고 컴파일된다. 가능한 처음부터 우리만의 파서를 썼다."<a href="#cite_note-15">[15]</a> libSass의 설계 목적은 다음과 같다: <ul><li>성능 - 개발자들은 Sass의 루비 구현체 대비 10배 속도가 더 빠르다고 보고하였다.<a href="#cite_note-16">[16]</a></li> <li>더 쉬운 통합 - libSass는 Sass를 더 많은 소프트웨어에 더 쉽게 통합할 수 있게 한다. libSass 이전까지는 Sass를 특정 언어나 소프트웨어 제품에 밀접하게 통합하기 위해 루비 인터프리터를 번들해야 했다. 이와 대조적으로 libSass는 외부 의존성이나 C 계열 인터페이스 없이 정적 링크가 가능한 라이브러리이므로 다른 프로그래밍 언어와 도구에 직접 Sass를 래핑하는 것이 용이하다.</li></ul> 이를테면, 오픈 소스 libSass 바인딩은 현재 <a href="/wiki/Node.js" title="Node.js">Node</a>, <a href="/wiki/Go_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="Go (프로그래밍 언어)">Go</a>, <a href="/wiki/%EB%A3%A8%EB%B9%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="루비 (프로그래밍 언어)">Ruby</a>용으로 존재한다.<a href="#cite_note-libsass-moovweb-blog-13">[13]</a> <ul><li>호환성 - libSass의 목적은 공식 루비 구현체의 Sass와의 완전한 호환성이다. 그러나 이 목표는 아직까지 완전히 충족되지 않고 있다.<a href="#cite_note-libsass-html5conf-8">[8]</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="IDE_통합">IDE 통합</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=8" title="부분 편집: IDE 통합">편집</a>]</div> <table class="wikitable"> <tbody><tr> <th>IDE</th> <th>소프트웨어</th> <th>웹사이트 </th></tr> <tr> <td><a href="/wiki/%EC%96%B4%EB%8F%84%EB%B9%84_%EB%93%9C%EB%A6%BC%EC%9C%84%EB%B2%84" title="어도비 드림위버">어도비 드림위버</a> CC 2017 </td> <td> </td> <td><a rel="nofollow" class="external free" href="https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/">https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20161114235934/https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/">Archived</a> 2016년 11월 14일 - <a href="/wiki/%EC%9B%A8%EC%9D%B4%EB%B0%B1_%EB%A8%B8%EC%8B%A0" title="웨이백 머신">웨이백 머신</a> </td></tr> <tr> <td><a href="/wiki/%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)" class="mw-redirect" title="이클립스 (소프트웨어)">이클립스</a></td> <td></td> <td> </td></tr> <tr> <td><a href="/wiki/%EC%9D%B4%EB%A7%A5%EC%8A%A4" title="이맥스">이맥스</a></td> <td>SCSS Mode</td> <td><a rel="nofollow" class="external free" href="https://github.com/antonj/scss-mode/">https://github.com/antonj/scss-mode/</a> </td></tr> <tr> <td><a href="/wiki/IntelliJ_IDEA" title="IntelliJ IDEA">JetBrains IntelliJ IDEA (얼티밋 에디션)</a></td> <td></td> <td><a rel="nofollow" class="external free" href="https://www.jetbrains.com/idea/">https://www.jetbrains.com/idea/</a> </td></tr> <tr> <td><a href="/wiki/PhpStorm" class="mw-redirect" title="PhpStorm">JetBrains PhpStorm</a></td> <td></td> <td><a rel="nofollow" class="external free" href="http://www.jetbrains.com/phpstorm/">http://www.jetbrains.com/phpstorm/</a> </td></tr> <tr> <td><a href="/w/index.php?title=%EB%A3%A8%EB%B9%84%EB%A7%88%EC%9D%B8&action=edit&redlink=1" class="new" title="루비마인 (없는 문서)">JetBrains RubyMine</a></td> <td></td> <td><a rel="nofollow" class="external free" href="http://www.jetbrains.com/ruby/">http://www.jetbrains.com/ruby/</a> </td></tr> <tr> <td><a href="/wiki/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8_%EB%B9%84%EC%A3%BC%EC%96%BC_%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4" class="mw-redirect" title="마이크로소프트 비주얼 스튜디오">마이크로소프트 비주얼 스튜디오</a></td> <td>Mindscape</td> <td><a rel="nofollow" class="external free" href="http://www.mindscapehq.com/products/web-workbench">http://www.mindscapehq.com/products/web-workbench</a> </td></tr> <tr> <td><a href="/wiki/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8_%EB%B9%84%EC%A3%BC%EC%96%BC_%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4" class="mw-redirect" title="마이크로소프트 비주얼 스튜디오">마이크로소프트 비주얼 스튜디오</a></td> <td>SassyStudio</td> <td><a rel="nofollow" class="external free" href="http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d">http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d</a> </td></tr> <tr> <td><a href="/w/index.php?title=%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8_%EC%9B%B9_%EB%A7%A4%ED%8A%B8%EB%A6%AD%EC%8A%A4&action=edit&redlink=1" class="new" title="마이크로소프트 웹 매트릭스 (없는 문서)">마이크로소프트 웹 매트릭스</a></td> <td></td> <td><a rel="nofollow" class="external free" href="https://web.archive.org/web/20150512042040/http://www.microsoft.com/web/">https://web.archive.org/web/20150512042040/http://www.microsoft.com/web/</a> </td></tr> <tr> <td><a href="/wiki/%EB%84%B7%EB%B9%88%EC%A6%88" title="넷빈즈">넷빈즈</a></td> <td></td> <td><a rel="nofollow" class="external free" href="http://plugins.netbeans.org/plugin/34929/scss-support">http://plugins.netbeans.org/plugin/34929/scss-support</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20151008054347/http://plugins.netbeans.org/plugin/34929/scss-support">Archived</a> 2015년 10월 8일 - <a href="/wiki/%EC%9B%A8%EC%9D%B4%EB%B0%B1_%EB%A8%B8%EC%8B%A0" title="웨이백 머신">웨이백 머신</a> </td></tr> <tr> <td><a href="/wiki/Vim" title="Vim">Vim</a></td> <td>haml.zip</td> <td><a rel="nofollow" class="external free" href="http://www.vim.org/scripts/script.php?script_id=1433">http://www.vim.org/scripts/script.php?script_id=1433</a> </td></tr> <tr> <td><a href="/wiki/%EC%95%84%ED%86%B0_(%EB%AC%B8%EC%84%9C_%ED%8E%B8%EC%A7%91%EA%B8%B0)" title="아톰 (문서 편집기)">아톰</a></td> <td></td> <td><a rel="nofollow" class="external free" href="https://github.com/atom/language-sass">https://github.com/atom/language-sass</a> </td></tr> <tr> <td><a href="/wiki/%EB%B9%84%EC%A3%BC%EC%96%BC_%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4_%EC%BD%94%EB%93%9C" title="비주얼 스튜디오 코드">비주얼 스튜디오 코드</a></td> <td></td> <td><a rel="nofollow" class="external free" href="https://code.visualstudio.com/Docs/languages/css">https://code.visualstudio.com/Docs/languages/css</a> </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="같이_보기">같이 보기</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=9" title="부분 편집: 같이 보기">편집</a>]</div> <ul><li><a href="/wiki/Less_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" title="Less (스타일시트 언어)">Less (스타일시트 언어)</a></li> <li><a href="/wiki/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%9F%AC%EC%8A%A4_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)" title="스타일러스 (스타일시트 언어)">스타일러스 (스타일시트 언어)</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="각주">각주</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=10" title="부분 편집: 각주">편집</a>]</div> <style data-mw-deduplicate="TemplateStyles:r35556958">.mw-parser-output .reflist{font-size:90%;margin-bottom:0.5em;list-style-type:decimal}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap mw-references-columns"><ol class="references"> <li id="cite_note-latest-release-1">↑ <a href="#cite_ref-latest-release_1-0">가</a> <a href="#cite_ref-latest-release_1-1">나</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://github.com/sass/dart-sass/blob/main/CHANGELOG.md">“Dart Sass - latest release”</a>. 《github.com》.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=github.com&rft.atitle=Dart+Sass+-+latest+release&rft_id=https%3A%2F%2Fgithub.com%2Fsass%2Fdart-sass%2Fblob%2Fmain%2FCHANGELOG.md&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-about-2"><a href="#cite_ref-about_2-0">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20130901145805/http://sass-lang.com/about.html">“Sass: Syntactically Awesome Style Sheets”</a>. 《sass-lang.com》. 2013년 9월 1일에 <a rel="nofollow" class="external text" href="http://sass-lang.com/about.html">원본 문서</a>에서 보존된 문서. 2013년 8월 30일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=sass-lang.com&rft.atitle=Sass%3A+Syntactically+Awesome+Style+Sheets&rft_id=http%3A%2F%2Fsass-lang.com%2Fabout.html&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-3"><a href="#cite_ref-3">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20071011121541/http://nex-3.com/">“Natalie Weizenbaum's blog”</a>. 2007년 10월 11일에 <a rel="nofollow" class="external text" href="http://nex-3.com/">원본 문서</a>에서 보존된 문서. 2014년 1월 17일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Natalie+Weizenbaum%27s+blog&rft_id=http%3A%2F%2Fnex-3.com%2F&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-main-4">↑ <a href="#cite_ref-main_4-0">가</a> <a href="#cite_ref-main_4-1">나</a> <a href="#cite_ref-main_4-2">다</a> <a href="#cite_ref-main_4-3">라</a> <a href="#cite_ref-main_4-4">마</a> <a href="#cite_ref-main_4-5">바</a> <cite class="citation web">Media Mark (3.2.12). <a rel="nofollow" class="external text" href="http://sass-lang.com/">“Sass - Syntactically Awesome Stylesheets”</a>. Sass-lang.com. 2014년 2월 23일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Sass+-+Syntactically+Awesome+Stylesheets&rft.pub=Sass-lang.com&rft.au=Media+Mark+%283.2.12%29&rft_id=http%3A%2F%2Fsass-lang.com%2F&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-5"><a href="#cite_ref-5">↑</a> <cite class="citation web">Kataria, Saransh. <a rel="nofollow" class="external text" href="https://wisdomgeek.com/web-development/getting-started-with-sass/">“Getting started with sass development”</a>. 《wisdomgeek》. saranshkataria.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=wisdomgeek&rft.atitle=Getting+started+with+sass+development&rft.aulast=Kataria&rft.aufirst=Saransh&rft_id=http%3A%2F%2Fwisdomgeek.com%2Fweb-development%2Fgetting-started-with-sass%2F&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-tutorial-6"><a href="#cite_ref-tutorial_6-0">↑</a> <a rel="nofollow" class="external text" href="http://sass-lang.com/tutorial.html">Sass - Syntactically Awesome Stylesheets</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20131009053354/http://sass-lang.com/tutorial.html">Archived</a> 2013년 10월 9일 - <a href="/wiki/%EC%9B%A8%EC%9D%B4%EB%B0%B1_%EB%A8%B8%EC%8B%A0" title="웨이백 머신">웨이백 머신</a> Tutorial </li> <li id="cite_note-7"><a href="#cite_ref-7">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20160310210318/https://www.drupal.org/project/sass">“Sass / Scss”</a>. Drupal.org. 2016년 3월 10일에 <a rel="nofollow" class="external text" href="https://drupal.org/project/sass">원본 문서</a>에서 보존된 문서. 2014년 2월 23일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Sass+%2F+Scss&rft.pub=Drupal.org&rft_id=http%3A%2F%2Fdrupal.org%2Fproject%2Fsass&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-libsass-html5conf-8">↑ <a href="#cite_ref-libsass-html5conf_8-0">가</a> <a href="#cite_ref-libsass-html5conf_8-1">나</a> <a href="#cite_ref-libsass-html5conf_8-2">다</a> <cite class="citation web">H. Catlin (2012년 10월 15일). <a rel="nofollow" class="external text" href="https://www.youtube.com/watch?v=j75-SslllvY&feature=player_detailpage#t=1831s">“Hampton's 6 Rules of Mobile Design”</a>. HTML5 Developer Conference. 2013년 7월 11일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Hampton%27s+6+Rules+of+Mobile+Design&rft.pub=HTML5+Developer+Conference&rft.date=2012-10-15&rft.au=H.+Catlin&rft_id=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dj75-SslllvY%26feature%3Dplayer_detailpage%23t%3D1831s&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-9"><a href="#cite_ref-9">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://code.google.com/p/jsass/">“jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting”</a>. Code.google.com. 2014년 2월 23일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=jsass+-+A+Java+implementation+of+the+Sass+compiler+%28and+some+other+goodies%29.+-+Google+Project+Hosting&rft.pub=Code.google.com&rft_id=https%3A%2F%2Fcode.google.com%2Fp%2Fjsass%2F&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-10"><a href="#cite_ref-10">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20140421052745/https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html">“SassCompiler (Vaadin 7.0.7 API)”</a>. Vaadin.com. 2013년 6월 6일. 2014년 4월 21일에 <a rel="nofollow" class="external text" href="https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html">원본 문서</a>에서 보존된 문서. 2014년 2월 23일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=SassCompiler+%28Vaadin+7.0.7+API%29&rft.pub=Vaadin.com&rft.date=2013-06-06&rft_id=https%3A%2F%2Fvaadin.com%2Fapi%2F7.0.7%2Fcom%2Fvaadin%2Fsass%2FSassCompiler.html&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-doc-11">↑ <a href="#cite_ref-doc_11-0">가</a> <a href="#cite_ref-doc_11-1">나</a> <a href="#cite_ref-doc_11-2">다</a> <a href="#cite_ref-doc_11-3">라</a> <a href="#cite_ref-doc_11-4">마</a> <a rel="nofollow" class="external text" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html">Sass (Syntactically Awesome StyleSheets)</a> SASS_REFERENCE </li> <li id="cite_note-functions-12"><a href="#cite_ref-functions_12-0">↑</a> <a rel="nofollow" class="external text" href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html">Module: Sass::Script::Functions</a> Sass Functions </li> <li id="cite_note-libsass-moovweb-blog-13">↑ <a href="#cite_ref-libsass-moovweb-blog_13-0">가</a> <a href="#cite_ref-libsass-moovweb-blog_13-1">나</a> <cite class="citation web">M. Catlin (2012년 4월 30일). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/">“libsass”</a>. Moovweb Blog. 2013년 5월 8일에 <a rel="nofollow" class="external text" href="http://blog.moovweb.com/2012/04/libsass/">원본 문서</a>에서 보존된 문서. 2013년 7월 11일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=libsass&rft.pub=Moovweb+Blog&rft.date=2012-04-30&rft.au=M.+Catlin&rft_id=http%3A%2F%2Fblog.moovweb.com%2F2012%2F04%2Flibsass%2F&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-14"><a href="#cite_ref-14">↑</a> <cite class="citation web">C. Eppstein (2012년 4월 15일). <a rel="nofollow" class="external text" href="https://twitter.com/chriseppstein/status/323845132417900544">“Tweet”</a>. 2013년 7월 11일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Tweet&rft.date=2012-04-15&rft.au=C.+Eppstein&rft_id=https%3A%2F%2Ftwitter.com%2Fchriseppstein%2Fstatus%2F323845132417900544&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-15"><a href="#cite_ref-15">↑</a> <cite class="citation web">A. Stacoviak & A. Thorp (2013년 6월 26일). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130806073554/http://5by5.tv/changelog/94">“Sass, libsass, Haml and more with Hampton Catlin”</a>. 2013년 8월 6일에 <a rel="nofollow" class="external text" href="http://5by5.tv/changelog/94">원본 문서</a>에서 보존된 문서. 2013년 7월 30일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Sass%2C+libsass%2C+Haml+and+more+with+Hampton+Catlin&rft.date=2013-06-26&rft.au=A.+Stacoviak+%26+A.+Thorp&rft_id=http%3A%2F%2F5by5.tv%2Fchangelog%2F94&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> <li id="cite_note-16"><a href="#cite_ref-16">↑</a> <cite class="citation web">D. Le Nouaille (2013년 6월 7일). <a rel="nofollow" class="external text" href="http://www.damln.com/log/sassc-and-bourbon-it-works/">“Sassc and Bourbon”</a>. 2013년 7월 11일에 확인함.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Sassc+and+Bourbon&rft.date=2013-06-07&rft.au=D.+Le+Nouaille&rft_id=http%3A%2F%2Fwww.damln.com%2Flog%2Fsassc-and-bourbon-it-works%2F&rfr_id=info%3Asid%2Fko.wikipedia.org%3ASass+%28%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8+%EC%96%B8%EC%96%B4%29" class="Z3988">  </li> </ol></div></div> <div class="mw-heading mw-heading2"><h2 id="외부_링크">외부 링크</h2>[<a href="/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&action=edit&section=11" title="부분 편집: 외부 링크">편집</a>]</div> <ul><li><a rel="nofollow" class="external text" href="https://sass-lang.com/">Sass</a> <a href="https://www.wikidata.org/wiki/Q1572865#P856" title="위키데이터에서 편집하기"><img alt="위키데이터에서 편집하기" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/10px-OOjs_UI_icon_edit-ltr-progressive.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/15px-OOjs_UI_icon_edit-ltr-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/20px-OOjs_UI_icon_edit-ltr-progressive.svg.png 2x" data-file-width="20" data-file-height="20" /></a> - 공식 웹사이트</li> <li><a rel="nofollow" class="external text" href="https://groups.google.com/group/haml">Haml/Sass Google Group</a></li> <li><a rel="nofollow" class="external text" href="https://github.com/Kronuz/pyScss">pyScss, a Python Scss library and client</a></li> <li><a rel="nofollow" class="external text" href="https://github.com/hapztron/sai">Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git) </a></li> <li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20150323061242/http://www.logogulf.ae/blog/sass-tools-and-resources/">Sass tools and resources</a></li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1&useformat=desktop" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">원본 주소 "<a dir="ltr" href="https://ko.wikipedia.org/w/index.php?title=Sass_(스타일시트_언어)&oldid=37295702">https://ko.wikipedia.org/w/index.php?title=Sass_(스타일시트_언어)&oldid=37295702</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/%ED%8A%B9%EC%88%98:%EB%B6%84%EB%A5%98" title="특수:분류">분류</a>: <ul><li><a href="/wiki/%EB%B6%84%EB%A5%98:2006%EB%85%84_%EA%B0%9C%EB%B0%9C%EB%90%9C_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4" title="분류:2006년 개발된 프로그래밍 언어">2006년 개발된 프로그래밍 언어</a></li><li><a href="/wiki/%EB%B6%84%EB%A5%98:MIT_%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4" title="분류:MIT 라이선스 소프트웨어">MIT 라이선스 소프트웨어</a></li><li><a href="/wiki/%EB%B6%84%EB%A5%98:%EB%A3%A8%EB%B9%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" title="분류:루비 (프로그래밍 언어)">루비 (프로그래밍 언어)</a></li><li><a href="/wiki/%EB%B6%84%EB%A5%98:%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4" title="분류:스타일시트 언어">스타일시트 언어</a></li><li><a href="/wiki/%EB%B6%84%EB%A5%98:%EC%9E%90%EC%9C%A0_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC" title="분류:자유 라이브러리">자유 라이브러리</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">숨은 분류: <ul><li><a href="/wiki/%EB%B6%84%EB%A5%98:%ED%95%B4%EA%B2%B0%EB%90%98%EC%A7%80_%EC%95%8A%EC%9D%80_%EC%86%8D%EC%84%B1%EC%9D%B4_%EC%9E%88%EB%8A%94_%EB%AC%B8%EC%84%9C" title="분류:해결되지 않은 속성이 있는 문서">해결되지 않은 속성이 있는 문서</a></li><li><a href="/wiki/%EB%B6%84%EB%A5%98:%EC%9C%84%ED%82%A4%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_P154%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94_%EB%AC%B8%EC%84%9C" title="분류:위키데이터 속성 P154를 사용하는 문서">위키데이터 속성 P154를 사용하는 문서</a></li><li><a href="/wiki/%EB%B6%84%EB%A5%98:%EC%9C%84%ED%82%A4%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_P7859%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94_%EB%AC%B8%EC%84%9C" title="분류:위키데이터 속성 P7859를 사용하는 문서">위키데이터 속성 P7859를 사용하는 문서</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> 이 문서는 2024년 6월 3일 (월) 10:16에 마지막으로 편집되었습니다.</li> <li id="footer-info-copyright">모든 문서는 <a rel="nofollow" class="external text" href="//creativecommons.org/licenses/by-sa/4.0/deed.ko">크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0</a>에 따라 사용할 수 있으며, 추가적인 조건이 적용될 수 있습니다. 자세한 내용은 <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use/ko">이용 약관</a>을 참고하십시오. Wikipedia®는 미국 및 다른 국가에 등록되어 있는 <a rel="nofollow" class="external text" href="https://www.wikimediafoundation.org">Wikimedia Foundation, Inc.</a> 소유의 등록 상표입니다.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">개인정보처리방침</a></li> <li id="footer-places-about"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%86%8C%EA%B0%9C">위키백과 소개</a></li> <li id="footer-places-disclaimers"><a href="/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%A9%B4%EC%B1%85_%EC%A1%B0%ED%95%AD">면책 조항</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">행동 강령</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">개발자</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/ko.wikipedia.org">통계</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">쿠키 정책</a></li> <li id="footer-places-mobileview"><a href="//ko.m.wikipedia.org/w/index.php?title=Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">모바일 보기</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-5f58cd8b6-ldr96","wgBackendResponseTime":156,"wgPageParseReport":{"limitreport":{"cputime":"0.257","walltime":"0.344","ppvisitednodes":{"value":2094,"limit":1000000},"postexpandincludesize":{"value":31689,"limit":2097152},"templateargumentsize":{"value":2255,"limit":2097152},"expansiondepth":{"value":13,"limit":100},"expensivefunctioncount":{"value":20,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":44531,"limit":5000000},"entityaccesscount":{"value":1,"limit":400},"timingprofile":["100.00% 286.727 1 -total"," 34.83% 99.875 1 틀:각주"," 34.57% 99.117 1 틀:위키데이터_속성_추적"," 27.67% 79.330 13 틀:웹_인용"," 20.53% 58.867 1 틀:Infobox_programming_language"," 19.55% 56.050 1 틀:Infobox"," 5.09% 14.582 2 틀:시작_날짜와_나이"," 2.36% 6.768 1 틀:공식_웹사이트"," 2.03% 5.813 2 틀:이전_시간"," 1.35% 3.860 3 틀:웨이백"]},"scribunto":{"limitreport-timeusage":{"value":"0.086","limit":"10.000"},"limitreport-memusage":{"value":4543799,"limit":52428800}},"cachereport":{"origin":"mw-api-int.codfw.main-88587746b-sptb4","timestamp":"20241203170239","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Sass (\uc2a4\ud0c0\uc77c\uc2dc\ud2b8 \uc5b8\uc5b4)","url":"https:\/\/ko.wikipedia.org\/wiki\/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)","sameAs":"http:\/\/www.wikidata.org\/entity\/Q1572865","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q1572865","author":{"@type":"Organization","name":"\uc704\ud0a4\ubbf8\ub514\uc5b4 \ud504\ub85c\uc81d\ud2b8 \uae30\uc5ec\uc790"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2018-01-14T02:51:18Z","dateModified":"2024-06-03T01:16:23Z","image":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Sass_Logo_Color.svg","headline":"\uc2a4\ud0c0\uc77c\uc2dc\ud2b8 \uc5b8\uc5b4"}</script> </body> </html>