사이트 언어로 이미지/수레를 바꾸기위한 SASS 믹스 (변경)

현재 웹 사이트 빌드에서 SASS를 사용 중입니다. 그것은 그것을 사용하는 나의 첫 번째 프로젝트이며, 조금 전에 덜 시도하고 그것을 좋아했다. 나는 몇 가지 기본적인 믹스 인과 변수를 LESS, 매우 유용한 것들로 만들었습니다!사이트 언어로 이미지/수레를 바꾸기위한 SASS 믹스 (변경)

SASS 믹스 인 및 구문, 특히 페이지가 다른 언어로 바뀌면 이미지 교환을위한 구문을 사용하려고합니다. 신체 ID가 변경되거나 <html lang="en"> 일 수 있습니다. 그리고 예를 들어, 웹 사이트가 중국어로 바뀌면 주위를 맴돌기도합니다. 따라서 언어가 AR이 아니라면 float이 왼쪽으로 떠있는 믹스가 떠서 플로트가됩니다.

.headerBg() when (@lang = en) {background-image:url(../img/hello.png);} 
.headerBg() when (@lang = it) {background-image:url(../img/ciao.png);} 

.header {.headerBg(); width: 200px; height:100px} 

.floatleft() when (@lang = en) { float: left;} 
.floatleft() when (@lang = ar) { float: right;} 

.logo {.floatleft();}

그것의 내가 문제가 오전 구문 : 적은 비용으로

나는이 같은 될 것이라고 생각합니다.

출처

2012-10-25 DBUK

나는 아마 @content 기능을 사용하고 같은 것을 할 거라고 :

@mixin headerBg { 
    .header { 
     @content 
    } 
} 

@mixin floatDir { 
    .logo { 
     @content 
    } 
} 

:lang(en) { 
    @include headerBg { 
     background-image:url(../img/hello.png); 
    } 
    @include floatDir { 
     float: left; 
    } 
} 

:lang(ar) { 
    @include headerBg { 
     background-image:url(../img/ciao.png); 
    } 
    @include floatDir { 
     float: right; 
    } 
}

로 컴파일 :

:lang(en) .header { 
    background-image: url(../img/hello.png); } 
:lang(en) .logo { 
    float: left; } 

:lang(ar) .header { 
    background-image: url(../img/ciao.png); } 
:lang(ar) .logo { 
    float: right; }

언어에 따라 배경 이미지 이름, 그때는 수도하는 경우 @each을 사용하고 다음과 같이하십시오.

@each $lang in en, ar { 
    :lang(#{$lang}) { 
     @if $lang == en { 
      .logo { 
       float: left; 
      } 
     } @else if $lang == ar { 
      .logo { 
       float: right; 
      } 
     } 
     .header { 
      background-image:url(../img/#{$lang}.png); 
     } 
    } 
}

다음에 컴파일 :

:lang(en) .logo { 
    float: left; } 
:lang(en) .header { 
    background-image: url(../img/en.png); } 

:lang(ar) .logo { 
    float: right; } 
:lang(ar) .header { 
    background-image: url(../img/ar.png); }

출처

2012-10-25 17:26:24 steveax

완벽하게 부탁드립니다. 나는 당신의 대답을 받아들이 기 전에 간단한 질문으로 다시 돌아와야 할 경우에 대비하여 그것을 빨리 시도 할 것입니다. – DBUK

사이트 언어로 이미지/수레를 바꾸기위한 SASS 믹스 (변경)

답변

관련 문제