HTML에서 가져온 SASS의 동적 값

이전에는 빠른 개발을 돕기 위해 도우미 CSS를 만들었습니다. 도우미 CSS의 내용은 같았다 :HTML에서 가져온 SASS의 동적 값

.margin-10{ 
    margin:10px!important; 
} 
.....

및 HTML에 나는 <div class="margin-10"></div>

를 사용할 수 있습니다하지만 SASS을 발견하고 놀라워. 특히 믹스 인 기능을 빠르게 개발하는 데 큰 도움이되었습니다. 그러나 나는 문제가있다. 다음은 시나리오입니다.

SCSS 믹스 인은 다음과 같습니다 HTML에서

@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
    -ms-border-radius: $radius; 
     border-radius: $radius; 
} 

.box { 
    @include border-radius(10px); 
}

나는 동적 클래스를 만들 수있는 가능성이 <div class="box"></div>

사용할 수 있습니까? 예를 들어 <div class="margin-left-10"></div>을 사용하면 자동으로 mixin을 사용하여 왼쪽 여백을 만듭니다. 내가 사용하는 경우 <div class="padding-top-100"></div> 패딩 정상-100 클래스는 자동으로 당신을 도울 수있는 SASS 믹스 인

출처

2017-09-25 SHAHRUKH SHAHID

아니요 ... SASS가 존재하는 이유입니다. 적어도 데이터 속성이 멎을 때까지. –

...하지만 관련있을 수 있습니다 - https://stackoverflow.com/questions/46323117/using-html-data-attributes-as-css-variable-ie-text-shadow/46326495#46326495 –

믹스 인을 사용하여 생성 및 조작 :

@mixin createMargin($min, $max) 
    @for $i from $min to $max+1 
    .margin-#{$i} 
     margin : 1px * $i !important 

    .margin-top-#{$i} 
     margin-top: 1px * $i !important 

    .margin-left-#{$i} 
     margin-left : 1px * $i !important 

    .margin-right-#{$i} 
     margin-right: 1px * $i !important 

    .margin-bottom-#{$i} 
     margin-bottom: 1px * $i !important 

@include createMargin(0, 100) // Choose your min and max value

그래서 그냥 40px을 가지고 <div class="XXX margin-top-40"></div>을 사용해야합니다 귀하의 부서에서 마진 상단

출처

2017-09-25 15:14:31

하지만 이것은 생성됩니다 0-100의 모든 마진 클래스, 맞습니까? 컴파일은 어떨까요? 내가 사용한 클래스 만 컴파일되거나 0에서 100까지의 여백 클래스를 컴파일합니다. –

예, 문제는 이것이 0 - 100에서 모든 여백 클래스를 생성한다는 것입니다. / –

HTML에서 가져온 SASS의 동적 값

답변

관련 문제