working on it ...

Filters

Explore Public Snippets

Sort by

Found 25 snippets matching: "css less"

    public by lbottaro  2737  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 ifcanduela  2127  2  4  0

    How to import a CSS/LESS file from another project into a LESS namespace, prefixing all imported styles.

    How to import a CSS/LESS file from another project into a LESS namespace, prefixing all imported styles.: less_namespace_import.less
    /* foreign.less */
    /* new file, "bridge" between imported styles and stylesheet */
    
    #export {
        .styles() {
            @import (less) "../../other-project/css/styles.css";
        }
    }
    
    /* old file */
    /* styles.less */
    
    @import "foreign.less"
    
    .some-container {
        #export > .styles();
    }
    
    
    

    external by mishelen  474  0  3  0

    Очередная ремопикселе фолбек From http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

    Очередная ремопикселе фолбек From http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/: new_gist_file_0
    CSS
    @function strip-unit($num) {
      @return $num / ($num * 0 + 1);
    }
    
    @mixin rem-fallback($property, $values...) {
      $max: length($values);
      $pxValues: '';
      $remValues: '';
    
      @for $i from 1 through $max {
        $value: strip-unit(nth($values, $i));
        $pxValues: #{$pxValues + $value*16}px;
    
        @if $i < $max {
          $pxValues: #{$pxValues + " "};
        }
      } 
    
      @for $i from 1 through $max {
        $value: strip-unit(nth($values, $i));
        $remValues: #{$remValues + $value}rem;
    
        @if $i < $max {
          $remValues: #{$remValues + " "};
        }
      } 
      
      #{$property}: $pxValues; 
      #{$property}: $remValues; 
    }
    
    

    external by Nhat Tan  426  0  3  0

    bootstrap_and_overrides.css.less

    bootstrap_and_overrides.css.less: bootstrap_and_overrides.css.less
    @import "twitter/bootstrap/bootstrap";
    
    // Set the correct sprite paths
    @iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
    @iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
    
    // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
    @fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
    @fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
    @fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
    @fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
    @fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
    
    // Font Awesome
    @import "fontawesome/font-awesome";
    
    // Glyphicons
    @import "twitter/bootstrap/glyphicons.less";
    
    // Your custom LESS stylesheets goes here
    //
    // Since bootstrap was imported above you have access to its mixins which
    // you may use and inherit here
    //
    // If you'd like to override bootstrap's own variables, you can do so here as well
    // See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
    //
    // Example:
    // @link-color: #ff0000;
    
    
    

    external by jtomaszk  184  0  2  0

    fixes bootstrap package for lineman error 'Reading vendor\bower\bootstrap\dist\css\less\normalize.less...ERROR'

    fixes bootstrap package for lineman error 'Reading vendor\bower\bootstrap\dist\css\less\normalize.less...ERROR': fix-bootstrap-package.coffee
    ###
    Task: fix-bootstrap-package
    Description: fixes bootstrap package for lineman error 'Reading vendor\bower\bootstrap\dist\css\less\normalize.less...ERROR'
    Dependencies: grunt
    Contributor: @jtomaszk
    
    Add to your application.js, following code:
    
            prependTasks: {
                common: ["bower", "fix-bootstrap-package"]
            }
    ###
    
    module.exports = (grunt) ->
      ncp = require('ncp').ncp
    
      srcPath = 'vendor/bower/bootstrap/less'
      destPath = 'vendor/bower/bootstrap/dist/css/less'
    
      grunt.registerTask "fix-bootstrap-package", "fixes bootstrap package", () ->
        done = do @async
        grunt.log.writeln('Copying files...')
        ncp(srcPath, destPath, (err) ->
          if err != null
            grunt.log.error('Copying files error: ' + err)
            done(false)
          else
            grunt.log.writeln('Copying files complete.')
            done(true)
        )
    
    
    
    

    external by rijk  149  0  2  0

    Comma-seperated list with just CSS/LESS

    Comma-seperated list with just CSS/LESS: ul-comma.less
    ul.comma {
    	display: inline;
    	margin: 0;
    	padding: 0;
    
    	li {
    		list-style: none;
    		display: inline;
    
    		&:after {
    			content: ", ";
    		}
    		&:last-child:after {
    			content: ""
    		}
    	}
    
    	&.verbose {
    		li:nth-last-child(2):after {
    			content: " and "
    		}
    		// optional, different ending after longer lists 
    		li:nth-last-child(3) + li:after {
    			content: " and of course "
    		}
    	}
    
    	&.dot {
    		li:last-child:after {
    			content: "."
    		}
    	}
    }
    
    

    external by pythdasch  970  0  3  0

    html css less

    html css less: gistfile1.txt
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>
    <body>
    <p class="box">Other content.</p>
    <script src="js/less.js" type="text/javascript" charset="utf-8" async defer></script>
    </body>
    </html>
    
    
    ##### styles.css
    
    lessc: ENOENT, open '/Users/david/Sites/tests/less/css/styles.less'
    
    @nice-blue: #5B83AD;
    
    p.box {
       width: 300px;
       border: solid 1px white;
       background:@nice-blue;
       padding: 20px;
    }
    
    p.box:before {
       content: "#";
       border: solid 1px white;
       padding: 2px;
       margin: 0 10px 0 0;
    }
    
    

    external by heidimason  548  0  3  0

    Started Less!

    Started Less!: bootstrap-overrides.css.less
    /* ===================================
        Mixins
    =================================== */
    .border(@location; @color: #ccc; @width: 1px; @style: solid) {
        border-@{location}: @width @style @color;
    }  
    
    .box-shadow(@x; @y; @blur; @color) {
        -webkit-box-shadow: @arguments;
           -moz-box-shadow: @arguments;
                box-shadow: @arguments;
    }
    
    .suggested-action-image-link {
        background-size: cover;
        background-repeat: no-repeat;
        .border(bottom, #DCE0B3);
    }
    
    

    external by pikpiki  520  0  3  0

    Comparison of only CSS, LESS, Sass, and Stylus

    Comparison of only CSS, LESS, Sass, and Stylus: style.styl
    $sans-serif = Helvetica, Arial, sans-serif
    body
      font $sans-serif 12px/1.25
    nav
      width 20em
      ul
        list-style-type none
        li
          display inline
    
    

    external by frhd  412  0  3  0

    css less negative numbers and absolute centering

    css less negative numbers and absolute centering: css less #1
    CSS
    @divwith: 1600px;
    
    .superdiv {
      overflow: auto;
      height: 100%;
      position: absolute;
      width: @divwith;
      margin-left: -(@divwith/2);
      left: 50%;
    }
    
    
    • Public Snippets
    • Channels Snippets