working on it ...

Filters

Explore Public Snippets

Sort by

Found 4 snippets matching: "css pre-processor"

    public by lbottaro  2738  4  6  4

    Using mixin in LESS with inheritance to reuse common style

    This simple LESS file shows how to use mixin. Mixin are used to group some CSS instructions in handy, reusable classes. You can embed all the properties of a class into another class by simply including the class name as one of its properties. Since the structure of the css classes is similar, I specify the mixin with also references to the i
    .contentRegion {
      margin: 5px;
      &-Side {
        @leftWidth: 500px;
        @leftMargin: 15px;
        @leftTotalWidth : @leftWidth + @leftMargin;
    
        &-left {
          float: left;
          width: @leftWidth;
          margin-right: @leftMargin;
          vertical-align: top;	        
        
          .mixinProperty()
          {
          	&-label{float: left;}
          	&-control{display: inline-block;}
          }
        
          &-one {  
            .mixinProperty;  
          }
        
          &-two {  
            .mixinProperty;  
          }
        
          &-three {  
            .mixinProperty;  
          }
        }
      }
    }
    
    <div class="contentRegion">
      <div class="contentRegion-Side-left">
          <div class="contentRegion-Side-left-one">
            <div class="contentRegion-Side-left-one-label">One</div>
            <div class="contentRegion-Side-left-one-control">123</div>
          </div>
          <div class="contentRegion-Side-left-two">
            <div class="contentRegion-Side-left-two-label">Two</div>
            <div class="contentRegion-Side-left-two-control">321</div>
          </div>
          <div class="contentRegion-Side-left-three">
            <div class="contentRegion-Side-left-three-label">Three</div>
            <div class="contentRegion-Side-left-three-control">345</div>
          </div>
      </div>
    </div>

    external by Kaspar Minosiants  34  0  1  0

    Stylus css pre processors

    Stylus css pre processors : stylus.md
    Some tips from https://webdesign.tutsplus.com/courses/become-a-css-superhero-with-stylus
    
    http://learnboost.github.io/stylus/
    
    https://github.com/tj/nib
    
    http://kouto-swiss.io/
    
    http://jeet.gs/
    
    http://semantic.gs/
    
    http://roots.cx/axis/
    
    
    
    
    ### Functions
    
    
    ```css
    -px($val, $base='none')
    	if($base == 'none')
    		($val / $base-font-size) rem
    	else
    		($val / $base) em	
    ```
    ### Mixins
    
    ```css
    fixed-centered()
    	position absolute
    	top 50%
    	left 50%
    	margin-left (@width / 2) * -1
    	margin-top (@height / 2) * -1
    
    ```
    
    
    ### Using golden ratio in layout
    
    ```css
    $phi  = 1.618
    
    $golden_major = 0.618
    $golden_minor = 0.382
    
    step($start, $steps, $multiplier = $start, $unit="none")
    	for i in (1..$steps)
    		$start = $start*$multiplier
    	if $unit != "none"
    		unit($start, $unit)
    	else
    		$start
    
    
    percent($num)
    	unit($num * 100, '%')
    
    // **********
    //  ELEMENTS 
    // **********
    
    header
    	padding unit($phi, rem) unit($golden_major, rem)
    
    ul.menu
    	li
    		margin-left unit($golden_minor, em)
    		line-height step(1, 2, $phi, em)
    	a
    		padding 0 1em
    		&:hover
    		&.active
    			border-radius unit($golden_major, em)
    
    
    ```
    
    ### Generating HTags styles
    
    ```css 
    
    
    $base_font_size = 16
    $px = ( 1 / $base_font_size ) rem
    
    $type_h_font_lineheight = 1.313em
    // Fallback font stack from http://cssfontstack.com/
    $type_h_font_family = 'Exo 2', 'Arial Black', 'Arial Bold', Gadget, sans-serif
    $type_h_font_weight = 700
    
    $type_h_font_sizes = {
    	'h1': 3,
    	'h2': 2.25,
    	'h3': 1.5,
    	'h4': 1.313,
    	'h5': 1.125,
    	'h6': 1
    }
    
    $type_h_font_vmargins = {
    	'h1': 0.563,
    	'h2': 0.625,
    	'h3': 1.313,
    	'h4': 1.313,
    	'h5': 1.313,
    	'h6': 0.75
    }
    
    h_tags($factor=1)
    	h1, h2, h3, h4, h5, h6
    		font-family $type_h_font_family
    		line-height $type_h_font_lineheight
    		font-weight $type_h_font_weight
    	for h_lvl, value in $type_h_font_sizes
    		{h_lvl}
    			$size = value * $factor
    			font-size unit($size < 1 ? 1 : $size, em)
    			margin unit( $type_h_font_vmargins[h_lvl], em) 0
    
    //usage
    
    h_tags()
    
    @media (max-width: 500*$px)
    	h_tags(0.8)
    
    @media (max-width: 400*$px)
    	h_tags(0.65)
    
    @media (max-width: 300*$px)
    	h_tags(0.5)
    ```
    
    

    external by Sooricatz  207  0  3  0

    LESS Elements A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org More information and usage examples over at: http://lesselements.com Examples page of all the mixins here: http://lesselements.com/tests Oreolek has a good fork ...

    LESS Elements A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org More information and usage examples over at: http://lesselements.com Examples page of all the mixins here: http://lesselements.com/tests Oreolek has a good fork with the mixins organized under namespaces here: https://github.com/Oreolek/elements I recommend g
    /*---------------------------------------------------
        LESS Elements 0.9
      ---------------------------------------------------
        A set of useful LESS mixins
        More info at: http://lesselements.com
      ---------------------------------------------------*/
    
    .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
      background: @color;
      background: -webkit-gradient(linear,
                                   left bottom,
                                   left top,
                                   color-stop(0, @start),
                                   color-stop(1, @stop));
      background: -ms-linear-gradient(bottom,
                                      @start,
                                      @stop);
      background: -moz-linear-gradient(center bottom,
                                       @start 0%,
                                       @stop 100%);
      background: -o-linear-gradient(@stop,
                                     @start);
      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
    }
    .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
      background: @color;
      background: -webkit-gradient(linear,
                                   left bottom,
                                   left top,
                                   color-stop(0, rgb(@start,@start,@start)),
                                   color-stop(1, rgb(@stop,@stop,@stop)));
      background: -ms-linear-gradient(bottom,
                                      rgb(@start,@start,@start) 0%,
                                      rgb(@stop,@stop,@stop) 100%);
      background: -moz-linear-gradient(center bottom,
                                       rgb(@start,@start,@start) 0%,
                                       rgb(@stop,@stop,@stop) 100%);
      background: -o-linear-gradient(rgb(@stop,@stop,@stop),
                                     rgb(@start,@start,@start));
      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
    }
    .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
      border-top: solid 1px @top-color;
      border-left: solid 1px @left-color;
      border-right: solid 1px @right-color;
      border-bottom: solid 1px @bottom-color;
    }
    .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
      -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
      -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
      box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    }
    .rounded(@radius: 2px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
    }
    .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
      -webkit-border-top-right-radius: @topright;
      -webkit-border-bottom-right-radius: @bottomright;
      -webkit-border-bottom-left-radius: @bottomleft;
      -webkit-border-top-left-radius: @topleft;
      -moz-border-radius-topright: @topright;
      -moz-border-radius-bottomright: @bottomright;
      -moz-border-radius-bottomleft: @bottomleft;
      -moz-border-radius-topleft: @topleft;
      border-top-right-radius: @topright;
      border-bottom-right-radius: @bottomright;
      border-bottom-left-radius: @bottomleft;
      border-top-left-radius: @topleft;
      .background-clip(padding-box);
    }
    .opacity(@opacity: 0.5) {
      -moz-opacity: @opacity;
      -khtml-opacity: @opacity;
      -webkit-opacity: @opacity;
      opacity: @opacity;
      @opperc: @opacity * 100;
      -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
      filter: ~"alpha(opacity=@{opperc})";
    }
    .transition-duration(@duration: 0.2s) {
      -moz-transition-duration: @duration;
      -webkit-transition-duration: @duration;
      -o-transition-duration: @duration;
      transition-duration: @duration;
    }
    .transform(...) {
      -webkit-transform: @arguments;
      -moz-transform: @arguments;
      -o-transform: @arguments;
      -ms-transform: @arguments;
      transform: @arguments;
    }
    .rotation(@deg:5deg){
      .transform(rotate(@deg));
    }
    .scale(@ratio:1.5){
      .transform(scale(@ratio));
    }
    .transition(@duration:0.2s, @ease:ease-out) {
      -webkit-transition: all @duration @ease;
      -moz-transition: all @duration @ease;
      -o-transition: all @duration @ease;
      transition: all @duration @ease;
    }
    .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
      -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
      -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
      box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
    }
    .box-shadow(@arguments) {
      -webkit-box-shadow: @arguments;
      -moz-box-shadow: @arguments;
      box-shadow: @arguments;
    }
    .box-sizing(@sizing: border-box) {
      -ms-box-sizing: @sizing;
      -moz-box-sizing: @sizing;
      -webkit-box-sizing: @sizing;
      box-sizing: @sizing;
    }
    .user-select(@argument: none) {
      -webkit-user-select: @argument;
      -moz-user-select: @argument;
      -ms-user-select: @argument;
      user-select: @argument;
    }
    .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
      -moz-column-width: @colwidth;
      -moz-column-count: @colcount;
      -moz-column-gap: @colgap;
      -moz-column-rule-color: @columnRuleColor;
      -moz-column-rule-style: @columnRuleStyle;
      -moz-column-rule-width: @columnRuleWidth;
      -webkit-column-width: @colwidth;
      -webkit-column-count: @colcount;
      -webkit-column-gap: @colgap;
      -webkit-column-rule-color: @columnRuleColor;
      -webkit-column-rule-style: @columnRuleStyle;
      -webkit-column-rule-width: @columnRuleWidth;
      column-width: @colwidth;
      column-count: @colcount;
      column-gap: @colgap;
      column-rule-color: @columnRuleColor;
      column-rule-style: @columnRuleStyle;
      column-rule-width: @columnRuleWidth;
    }
    .translate(@x:0, @y:0) {
      .transform(translate(@x, @y));
    }
    .background-clip(@argument: padding-box) {
      -moz-background-clip: @argument;
      -webkit-background-clip: @argument;
      background-clip: @argument;
    }
    
    
    

    external by aperezdc  125  0  2  0

    One-line CSS pre-processor àla LESS / SCSS / SASS

    One-line CSS pre-processor àla LESS / SCSS / SASS: styles.css.in
    /*
     * Run this through the C/C++ preprocessor like this:
     *
     *   cpp -nostdinc -w -P input.css.in | sed 'y/$/#/' > output.css
     *
     * Note that the C/C++ preprocessor always interprets octothorpe characters
     * at beggining of lines as preprocessor directives. Use sollar signs instead
     * to avoid the trouble. Dollar signs are changed into octothorpes using
     * "sed" after passing the source through the preprocessor.
     *
     * If you use Make to build your stuffs, a rule like this will take care
     * of pre-processing your CSS files:
     *
     * %.css: %.css.in
     *   cpp -nostdinc -w -P $< | sed 'y/$$/#/' > $@
     *
     * Enjoy! ☺
     */
    
    /* Define some variables */
    #define COLOR1 $212121
    #define COLOR2 $FF2121
    
    /* A macros to handle vendor prefixes */
    #define _ADD_VENDOR_PREFIXES(_name, _content) \
      -webkit-_name: _content; \
      -moz-_name: _content; \
      -ms-_name: _content; \
      -o-_name: _content; \
      _name: _content
    
    /* Shorthands for attributes which may need the vendor prefixes */
    #define transition(_x) _ADD_VENDOR_PREFIXES(transition, _x)
    #define transform(_x) _ADD_VENDOR_PREFIXES(transform, _x)
    
    /* Some rules to style a <div> changing on mouseover */
    $hoverme {
      width: 300px;
      height: 300px;
      background-color: COLOR1;
      transition(5s linear);
    }
    
    $hoverme:hover {
      border-radius: 150px;
      transform(rotate(90deg));
    }
    
    

    List Complete ( 4 snippets total )

    • Public Snippets
    • Channels Snippets