2013-09-16 4 views
1

여기에서 알 수 있듯이 http://codepen.io/MyXoToD/pen/alkmL 저는 일부 자바 스크립트 기능을 SASS로 변환하려고합니다. 모든 것이 잘 작동하지만SASS random()은 항상 같은 값을 반환합니다. 왜 그럴까요?

이 하나 개의 기능은 ... 나는이 변환 할 :이 경우 내 문제가

@for $i from 1 through $articles { 
    &:nth-child(#{$i}) { 
    $random: random(210); 
    $hue: $random + ($i * 15); 
    background-color: hsl($hue, 85%, 70%); 
    color: hsl($hue, 45%, 55%); 
    } 
} 

입니다

random(210) 항상 반환이 같은 무언가로

var pallete = Math.floor(Math.random() * 210); 

$("article h2").each(function(i) { 
    var hue = pallete + (i * 15); 
    var css = 'background:hsl(' + hue + ',85%,70%); color:hsl(' + hue + ',45%,55%);'; 
    $(this).attr("style", css); 
}); 

을 각 페이지로드시 동일한 값. @for을 통해 각각 무작위로 다른 값을 얻을 수 있습니까?

+1

'random()'은 현재 Sass 나 Compass의 기능이 아니므로 CodePen에서만 사용할 수 있습니다 (https://github.com/chriseppstein/compass/issues/1154 및 https : // 참조). github.com/nex3/sass/pull/904) – cimmanon

답변

2

아니요, 적절한 생산 설정에서는 불가능합니다. 브라우저는 CSS 만 이해하므로 SASS와 다른 모든 CSS 전처리 기는 일반적으로 각 페이지로드에 대해 클라이언트가 아닌 한 번 (서버에서) 실행됩니다.

예를 들어 LESS에는 클라이언트 측 컴파일러 (less.js)가 있지만이를 사용하면 페이지로드 프로세스가 느려지 며 일반적으로 개발에만 적합합니다. 동적 인 색상을 원한다면 JavaScript를 사용하여 관련 CSS를 작성하거나 이전 코드를 유지하는 것을 고려하십시오.

+0

사실이 아닙니다. SASS, LESS 등을 클라이언트 측에서 컴파일 할 수 있습니다. 물론 나쁜 생각이지만 여전히 가능합니다. –

+0

@dragoste ** 보통 ** – iConnor

+0

@Pinocchio라는 단어를 주목하십시오. ThiefMaster의 표현은 "불가능합니다." –