속성 이름에 변수를 입력하는 구문은 무엇입니까?

Question

그래서 나는이 같은 변수 설정 :

$variable-name: left; 

을 내 CSS에서 나는 스타일을 가지고있는 속성 국경에서 왼쪽

내가 사용하는 속성의 이름으로 변수를 대체하려면

을 이 구문은 다음과 같습니다.

border-#{$variable-name}: 

이 해시 태그를 중괄호로 사용하여 변수를 대체하여 본 적이 없습니다.

이 구문의 의미가 더 넓습니까? 아니면이 상황에서 사용되는 것입니까?

시간을내어 내 질문을 읽어 주셔서 감사 드리며 도움으로 응답하는 사람들은 대단히 친절합니다.

Answer 1

기본적으로 여분의 # {}가 변수를 보간합니다. 즉, 입력 한대로 변수를 덤프하는 것과는 대조적으로 일반 CSS로 변경합니다 (예 : 색상은 괜찮습니다).

는 여기를 참조하십시오 :

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_

및

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

예

:

SASS

$variable-name: "left"; 
$font: "Lucida Grande"; 

.something{ 
font-family: $font; 
font-family: #{$font}; 
border-#{$variable-name}: 1px solid red; 
} 

,536 당신은 #을 사용하여 볼 수 있듯이

CSS

.something { 
    font-family: "Lucida Grande"; 
    font-family: Lucida Grande; 
    border-left: 1px solid red; 
} 

는 {} 정확히 간단한 변수 선언 것이다 단지 출력 모든 것을 반면 따옴표 inbetween 무엇으로 출력을 렌더링합니다.

내가 파일 경로에 대한 보간 출력을 사용하는 경향이

는 예 :

이 도움이

background-image: url(/extras/images/imageName.png); 

희망을 제공

$filePath: "/extras/images/" 

background-image: url(#{$filePath}imageName.png); 

하는?