Задать вопрос
Ответы пользователя по тегу Less
  • Subline text 3 в less нету подсказок, что делать?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Ну ответ очевиден, установить подсказки синтаксиса для less:
    https://github.com/danro/LESS-sublime
    Ответ написан
    Комментировать
  • Как правильно использовать @media query в LESS?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Подсмотрите у проектов типа bootstrap, например:
    .container {
      .container-fixed();
    
      @media (min-width: @screen-sm-min) {
        width: @container-sm;
      }
      @media (min-width: @screen-md-min) {
        width: @container-md;
      }
      @media (min-width: @screen-lg-min) {
        width: @container-lg;
      }
    }

    и в отдельном файле с переменными
    //== Media queries breakpoints
    //
    //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
    
    // Extra small screen / phone
    //** Deprecated `@screen-xs` as of v3.0.1
    @screen-xs:                  480px;
    //** Deprecated `@screen-xs-min` as of v3.2.0
    @screen-xs-min:              @screen-xs;
    //** Deprecated `@screen-phone` as of v3.0.1
    @screen-phone:               @screen-xs-min;
    
    // Small screen / tablet
    //** Deprecated `@screen-sm` as of v3.0.1
    @screen-sm:                  768px;
    @screen-sm-min:              @screen-sm;
    //** Deprecated `@screen-tablet` as of v3.0.1
    @screen-tablet:              @screen-sm-min;
    
    // Medium screen / desktop
    //** Deprecated `@screen-md` as of v3.0.1
    @screen-md:                  992px;
    @screen-md-min:              @screen-md;
    //** Deprecated `@screen-desktop` as of v3.0.1
    @screen-desktop:             @screen-md-min;
    
    // Large screen / wide desktop
    //** Deprecated `@screen-lg` as of v3.0.1
    @screen-lg:                  1200px;
    @screen-lg-min:              @screen-lg;
    //** Deprecated `@screen-lg-desktop` as of v3.0.1
    @screen-lg-desktop:          @screen-lg-min;
    
    // So media queries don't overlap when required, provide a maximum
    @screen-xs-max:              (@screen-sm-min - 1);
    @screen-sm-max:              (@screen-md-min - 1);
    @screen-md-max:              (@screen-lg-min - 1);
    Ответ написан
  • Какой лучше всего выбрать препроцессор для CSS?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    О Sass и Bootstrap я понял, они не незаменимы.
    почему?
    как аналог sass есть less, который кстати актуальнее если использовать bootstrap
    bootstrap - это вообще не предпроцессор и у него куча аналогов, которые в свою очередь используют less или sass или и то и то на выбор.
    Ответ написан
    Комментировать
  • Покажите на пальцах, как пользоваться LESS в YII2?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Как вариант:
    добавить расширение вот это:
    "nizsheanez/yii2-asset-converter": "1.*"
    в конфиге:
    'assetManager' => [
                'converter'=> [
                    'class'=>'nizsheanez\assetConverter\Converter',
                    'destinationDir' => '', //at which folder of @webroot put compiled files
                    'parsers' => [
                        'less' => [ // file extension to parse
                            'class' => 'nizsheanez\assetConverter\Less',
                            'output' => 'css', // parsed output file type
                            'options' => [
                                'auto' => true, // optional options
                            ]
                        ]
                    ]
                ]
            ],

    в assets добавляем свой less файл и он конвертируется в css. Остается только вопрос как это все в bootstrap завязать. Видимо отключить его от yii и прописать его явно в виде less файлов.
    Ответ написан
    Комментировать