Sass-댓글

이 장에서 우리는 Sass에 대해 공부할 것입니다 Comments. 주석은 소스 코드에있는 실행 불가능한 명령문입니다. 주석은 소스 코드를 이해하기 쉽게 만듭니다. SASS는 두 가지 유형의 주석을 지원합니다.

Multiline comments− 이는 / * 및 * /를 사용하여 작성됩니다. 여러 줄 주석은 CSS 출력에서 유지됩니다.
Single line comments − 이것들은 //댓글이 이어집니다. 한 줄 주석은 CSS 출력에서 유지되지 않습니다.

예

다음 예제는 SCSS 파일에서 주석 사용을 보여줍니다.

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

다음으로 style.scss 파일을 생성합니다 .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

다음 명령을 사용하여 SASS에 파일을 감시하고 SASS 파일이 변경 될 때마다 CSS를 업데이트하도록 지시 할 수 있습니다.

sass --watch C:\ruby\lib\sass\style.scss:style.css

다음으로 위의 명령을 실행합니다. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

산출

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

위의 주어진 HTML 코드를 sass_comments.html 파일.
브라우저에서이 HTML 파일을 열면 아래와 같이 출력이 표시됩니다.

여러 줄 주석 내 보간에 대해 알아 보려면이 링크를 클릭하십시오 .

Sass – 여러 줄 주석의 보간

기술

여러 줄 주석 내의 보간은 결과 CSS에서 해결됩니다. 중괄호 안에 변수 또는 속성 이름을 지정할 수 있습니다.

통사론

$var : "value";
/* multiline comments #{$var} */

예

다음 예제는 SCSS 파일의 여러 줄 주석에서 보간을 사용하는 방법을 보여줍니다.

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

다음으로 style.scss 파일을 생성합니다 .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

다음 명령을 사용하여 SASS에 파일을 감시하고 SASS 파일이 변경 될 때마다 CSS를 업데이트하도록 지시 할 수 있습니다.

sass --watch C:\ruby\lib\sass\style.scss:style.css

다음으로 위의 명령을 실행합니다. 다음 코드를 사용하여 style.css 파일을 자동으로 생성합니다.

style.css

/* Framework version for the generated CSS is 7.8. */

산출

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

위의 주어진 HTML 코드를 sass_comments_interpolation.htm 파일.
브라우저에서이 HTML 파일을 열면 아래와 같이 출력이 표시됩니다.