기존 클래스를 기반으로 한 'if'문을 추출하십시오.

Question

저는 Sass를 처음 접했고 관련 CSS를 생성하기 위해 'if'문을 사용하여 요소의 기존 클래스를 검색하고 싶습니다.

내 설정에는 고유 한 ID가 할당 된 수많은 자바 스크립트 생성 이미지와 "그림"클래스, 무작위로 할당 된 위, 오른쪽, 아래 또는 왼쪽의 클래스가 있습니다.

또한 Sass (여기에서 찾을 수 있습니다 : https://gist.github.com/chriseppstein/1561650)에 임의의 함수를 사용하고 있으며 각 값이 각 값에 임의로 배치되도록 각 값에 다른 값을 지정하려고합니다.

내 SCSS는 할당 된 클래스를 기반으로 이미지를 배치 다음이 있습니다 :

@for $i from 0 through $number-of-pictures { 
    #picture-#{$i}{ 

    &.top { 
     left: random($stage-width); 
    } 

    &.right { 
     top: random($stage-height); 
    } 

    &.bottom { 
     left: random($stage-width); 
    } 

    &.left { 
     top: random($stage-height); 
    } 
    } 
} 

이 잘 작동을하지 않는하지만 선언 블록의 톤을 만듭니다. 예를 들어, # 사진-38는 내가 필요로하는 모든 첫 번째 선언 블록이며, 클래스 ".top"를 할당하지만, CSS 수출 모든 옵션 :

#picture-38.top { 
     left: 38px; //This is a random number that is different for each ID. 
} 
#picture-38.right { 
     top: 28px; 
} 
#picture-38.bottom { 
     left: 12px; 
} 
#picture-38.left { 
     top: 47px; 
} 

내가 필요로하는 것을, if 문입니다 css를 파싱하기 전에 요소에 클래스가 있는지 여부를 감지합니다. 다음과 같음 :

@if "#picture-#{$i} has class $class-top" { 
    &.top { 
     left: random($stage-width); 
    } 
} 

아이디어가 있으십니까?

Answer 1

대답은 당신이 SASS/SCSS로 할 수 없다는 것입니다.

DOM 요소에 대한 소유/할당을 감지하려고합니다.

DOM 요소와 상호 작용하는 방법은 "그림-X 번호가"클래스 "클래스 맨"을 가지고 있으며, 그에 따라 임의의 top 값을 설정하면 감지 자바 스크립트를 사용하기 만하면 무엇 자바 스크립트

입니다.

예.

var picture = document.GetElementById('picture-1'); 
var pic_class = picture.className 
if(pic_class.indexOf('class-top') != -1) 
{ 
    /*Returns a random number between 1 and 100*/ 
    picture.style.top = Math.floor((Math.random()*100)+1) + 'px'; 
} 

(!) 참고 : top 지금 측정 단위 (예를 들어 px), 따라서 + 'px'

Answer 2

비트 오래된 필요하지만 나는 최근 비슷한 일에 종사 - 나는 여기의 다른 클래스를 통해 루프 배열을 사용 버튼을 클릭하고 그에 따라 스타일을 추가하십시오. 코드 스 니펫에 선언되지 않은 변수가 있음에 유의하십시오.

$buttonSizes: large-buttons, medium-buttons, small-buttons; 
@each $buttonSizesItem in $buttonSizes { 
    %#{nth($buttonSizesItem, 1)}{ 
    @if (nth($buttonSizesItem, 1))== large-buttons{ 
     @include font-size(2); 
     @include rounded(6); 
     padding: 8px 15px;  
    } 
    @if (nth($buttonSizesItem, 1))== medium-buttons{ 
     @include font-size(1.8); 
     @include rounded(5); 
     padding: 4px 12px; 
     &.button-loading { 
     &:before{ 
      top: 2px;  
     } 
     } 
    } 
    @if (nth($buttonSizesItem, 1)) == small-buttons{ 
     @include font-size(1.6); 
     @include rounded(4); 
     padding: 4px 10px; 
     &.button-loading { 
     &:before{ 
      top: 0;  
     } 
     } 
    } 
    } 
}