2014-07-22 5 views
-1

저는 SASS를 처음 접했고 SASS를 사용하는 HTML 문서에 다소 간단한 스타일을 적용하려고했습니다. 그러나, 내가 뭘 잘못하고 있는지 전혀 모른다. 여기 내 HTML이있다 :SASS 스타일을 적용 할 수 없습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> 
     <title>SASS Basics</title> 
    </head> 
    <body> 

     <p>SASS Basic</p> 

    </body> 
</html> 

제가 적용 할 SASS 스타일 시트는 다음과 같습니다

$color = #1a1a1a 

p 
    display: block 
    width: 150px 
    height: 100px 
    color: $color 

그래서 단락 위의 스타일 중 하나를하지 않습니다. CSS 파일도 필요합니까? 지금은 아래에 모두 테스트하고 있습니다. http://sassmeister.com/

+0

CSS 패널에 표시된 오류를 어떻게 알 수 없었습니까? ''$ color ': 예상 된 ":", "= # 1a1a1a"였던 CSS가 유효하지 않습니다. – cimmanon

답변

2

당신이 사용하고있는 = 대신 : (A)의 :이입니다

$color: #1a1a1a 

p 
    display: block 
    width: 150px 
    height: 100px 
    color: $color 

신택스. Marcin Nabialek으로 언급했듯이이 코드를 컴파일하려면 Ruby와 Sass를 설치해야합니다. See here for installation procedure.

+0

아, 네. 실례합니다. 내가 가능한 한 빨리 답변을 수락 할 것입니다. –

+0

도와 드리겠습니다. 나는 당신에게 SCSS 구문을 사용하도록 권하고 싶습니다. SCSS 구문은 더 읽기 쉽고 몇 가지 실수를 피합니다. – zessx

+0

나는 바로 그걸로 시작했을 텐데, 적어도 기본적인 SASS를 배울 수 있고 Sassy로 진행할 수있을 거라 생각했다. 코알라를 지금 응용 프로그램으로 사용. 시간 내 주셔서 감사합니다 :) –

1

아니요, SASS 파일을 CSS 파일로 변환해야합니다. 브라우저는 SAS 언어가 아닌 CSS 파일 만 알고 있습니다.

Sass page에 Sass 구역을 사용해야합니다. 순수 SASS를 사용할 수 있지만 예를 들어 나침반 프레임 워크를 사용할 수도 있습니다.

sassmeister.com에서 볼 수 있듯이 코드가 CSS 구문으로 변환되었으므로 간단한 CSS 파일의 경우 이론적으로이 CSS를 CSS 파일로 복사 할 수 있지만 권장하지는 않습니다. SASS watch를 사용하는 법을 배워야합니다. HTML 문서에서

당신은 추가해야합니다 :

<link rel="stylesheet" href="yourcssfilename.css" media="all" /> 

는 CSS 파일을 사용할 수 있습니다.

또한 zessx으로 당신이 당신의 SASS 구문에 오류가 언급 한 (나는 personaly 사용 SCSS 구문)

+0

웹 사이트의 SASS 편집기가 자동으로 그렇게한다고 생각하면 왜 아무 것도 변하지 않습니다. –

관련 문제