Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

.css file not apper after hit Ctrl+S #22

Closed
sunny628 opened this issue May 11, 2017 · 8 comments
Closed

.css file not apper after hit Ctrl+S #22

sunny628 opened this issue May 11, 2017 · 8 comments

Comments

@sunny628
Copy link

Hi,I install easy-less , then there have a .less file. so hit Ctrl+S .but .css file not appear. can you help me ?

win7 System
Visual Studio Code 1.12.1
@mrcrowl
Copy link
Owner

mrcrowl commented May 11, 2017 via email

@sunny628
Copy link
Author

@import '../static/css/layout.css';
@import '../static/css/base.css';
@import '../static/css/iconfont.css';
@logo-color: #f45831;

#home-basic {
margin-bottom: 40px;
.profile-wrapper {
margin-left: 495px;
height: 320px;
.icon, .iconfont {
width: 14px;
height: 14px;
font-size: 14px;
display: inline-block;
line-height: 1;
}
.iconfont, .text {
vertical-align: middle;
}
}
h2 {
color: #f45831;
height: 34px;
line-height: 34px;
margin-bottom: 5px;
font-size: 18px;
font-weight: normal;
}
p {
line-height: 24px;
font-size: 12px;
font-family: '宋体';
}

.video-wrapper {
    width: 445px;
    height: 320px;
    background: #ccc;
    &.onplay {
        .video-inner {
            display: none;
        }
        .video-play-button {
            background: rgba(0, 0, 0, .8);
        }
        .icon-play {
            opacity: 0;
        }
    }
    .video-inner {
        width: 445px;
        height: 320px;
        overflow: hidden;
        background: #ccc;
        text-align: center;
        &:hover {
            img {
                transform: scale(1.05);
            }
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
            transition: all .3s ease;
        }
    }
}

}

#home-honor {
margin-bottom: 25px;
}

#honor-slider {
width: 1200px;
margin: 0 auto;
border: 1px solid blue;
position: relative;
&.loading {
.slider {
background: red;
}
}
.slider {
width: 950px;
height: 380px;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
background: pink;

}
.slider-btn {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    font-size: 50px;
    color: #bbb;
    text-align: center;
    cursor: pointer;
    z-index: 10;
}
.slider-btn.prev {
    left: 0;
}
.slider-btn.next {
    right: 0;
}
.slider-item {
    padding: 10px 10px 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    display: block;
    background: #fff;
    width: 330px;
    text-align: center;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 0;
}
.slider-item.active .honor-cover {
    height: 310px;
}
.slider-item.activ .honor-label {
    height: 60px;
    line-height: 60px;
}
.slider-item.activ .leftShadow, .slider-item.activ .rightShadow {
    opacity: 1;
}
.slider-item.prev .honor-cover {
    height: 250px;
}
.slider-item.prev .honor-label {
    height: 50px;
    line-height: 50px;
}
.slider-item.beforePrev .text {
    opacity: 0.4;
}
.slider-item.beforePrev .honor-cover {
    height: 220px;
}
.slider-item.beforePrev .honor-label {
    height: 40px;
    line-height: 40px;
}
.slider-item.next .honor-cover {
    height: 250px;
}
.slider-item.next .honor-label {
    height: 50px;
    line-height: 50px;
}
.slider-item.afterNext .text {
    opacity: 0.4;
}
.slider-item.afterNext .honor-cover {
    height: 220px;
}
.slider-item.afterNext .honor-label {
    height: 40px;
    line-height: 40px;
}
a, img, span {
    display: block;
    text-decoration: none;
}
img {
    display: block;
    width: 100%;
    height: 100%;
    background: #333;
}
.text {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: opacity=0;
}
.leftShadow {
    position: absolute;
    top: 23px;
    left: -174px;
    width: 174px;
    height: 224px;
    background: url('/static/images/leftShadow.png') no-repeat;
    opacity: 0;
}
.rightShadow {
    position: absolute;
    top: 23px;
    right: -174px;
    width: 174px;
    height: 224px;
    background: url('/static/images/rightShadow.png') no-repeat;
    opacity: 0;
}
.honor-label {
    font-size: 18px;
    color: #333;
    font-family: '微软雅黑';
}

}

#home-course {
margin-bottom: 60px;
.card-item, .card-inner {
height: 295px;
}
.card-inner.active .card-label {
color: #f45831;
}
.card-cover {
display: block;
width: 100%;
height: 180px;
transition: all .3s ease;
}
.card-label {
margin-top: 10px;
color: #333;
height: 28px;
line-height: 28px;
display: block;
}
.card-text span {
margin-right: 5px;
}
.card-price {
font-family: '微软雅黑';
margin-top: 5px;
}
.card-price em {
font-style: normal;
vertical-align: middle;
color: #f45831;
}
.card-price em.text {
font-size: 12px;
font-family: '宋体';
color: #999;
}
.card-price .price {
font-size: 18px;
}
}

#home-teacher {
.content {
padding-bottom: 60px;
}
.cards-wrapper {
margin-bottom: 55px;
}
.card-cover {
width: 275px;
height: 180px;
}
.card-inner {
&:hover {
transform: none;
.card-cover img {
transform: scale(1.05);
}
}
}
.card-text {
margin-top: 15px;
}
.card-more .card-text {
margin-top: 0;
}
.card-text span {
margin-right: 0;
}
.card-text i, .card-text span {
vertical-align: middle;
}
}

#home-env {
margin-bottom: 60px;
.env-photos {
width: 1250px;
}
.env-item.first .env-photo, .env-item.second .env-photo {
height: 450px;
}
.env-item.first .env-photo {
width: 790px;
}
.env-photo {
display: block;
width: 380px;
height: 240px;
margin-bottom: 30px;
margin-right: 30px;
transition: all .3s ease;
overflow: hidden;
img {
display: block;
width: 100%;
transition: all .3s ease;
}
}
.env-item:hover {
.env-photo img {
transform: scale(1.05);
}
}
}

#home-student .content {
padding-bottom: 40px;
.cards-wrapper {
margin-bottom: 35px;
}
.card-item {
height: auto;
}
.card-inner {
min-height: 350px;
}
.card-cover {
width: 275px;
height: 270px;
}
.card-text {
margin-top: 15px;
}
.card-text span {
margin-right: 0;
}
.cards-wrapper .card-more .card-text {
margin-top: 0;
}
.cards-wrapper .card-more {
top: 230px;
}
}

#studio-lessons ul li {
.right {
padding-top: 100px;
}
}

#studio-teachers ul li {
padding: 30px;
.cover {
margin-right: 35px;
width: 95px;
height: 95px;
img {
border-radius: 100%;
}
}
dt, dd {
margin-bottom: 5px;
}
dt a {
line-height: 28px;
}
.detail-text {
margin-top: 0;
}
.detail {
max-width: 855px;
}
dd span {
border: 1px solid #999;
padding: 4px 8px;
font-size: 12px;
font-family: "宋体";
color: #666;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
display: inline-block;
}
.teacher-course {
border: 1px solid #ccc;
padding: 4px 5px;
margin-right: 5px;
color: #999;
border-radius: 2px;
}
.teacher-intro {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
overflow: hidden;
font-size: 14px;
line-height: 28px;
margin-bottom: 15px;
color: #666;
font-family: "Microsoft Yahei";
}
i {
font-style: normal;
vertical-align: middle;
}
.right {
padding-right: 10px;
padding-top: 88px;
text-align: center;
a {
display: block;
font-size: 12px;
color: #fb5835;
}
a span {
padding: 6px 10px;
border: 1px solid #fb5835;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
a.fav-btn {
color: #999;
margin-bottom: 20px;
&:hover {
:hover {
color: #fb5835;
}
}
}
}
}

#studio-medias {
margin: 10px 0;
.video-content-inner {
width: 1230px;
margin-left: -15px;
}
.video-item-wrapper {
width: 33.3333%;
height: auto;
float: left;
overflow: hidden;
}
.video-item-wrapper .video-item {
position: relative;
width: 380px;
height: 270px;
margin: 0 15px 20px;
&.onplay {
.onplay-info {
opacity: 1;
}
.icon-play {
opacity: 0;
}
}
}
.video-player-wrapper {
display: block;
position: relative;
width: 100%;
overflow: hidden;
transition: all .5s ease;
}
.video-player-wrapper.hidden {
height: 0;
border: .1rem solid transparent;
}
.video-player-init-wrapper {
display: block;
position: relative;
width: 30rem;
height: 23rem;
margin: 3rem auto 1rem auto;
overflow: hidden;
border-radius: .2rem;
box-shadow: 0 0 1.4rem rgba(0, 0, 0, .5);
}
.video-player-head-band {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #999;
// opacity: 0;
transition: all .5s ease;
text-align: center;
}
.video-player-head-band .title {
font-size: 1rem;
line-height: 3rem;
padding-left: 1rem;
border-bottom: none;
}
.icon-play {
margin: 90px auto;
}
.video-player-head-band .icon-x {
font-size: 38px;
line-height: 38px;
width: 38px;
height: 38px;
display: block;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.onplay-info {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 24px;
text-align: center;
line-height: 20rem;
opacity: 0;
transition: all .2s ease;
}
.gallery-wrapper .gallery-wall .gallery-wall-item {
width: 100%;
height: 270px;
}
.photo-item {
position: relative;
width: 360px;
height: 330px;
margin: 0 15px 20px;
padding: 10px;
border: 1px solid #eee;
text-align: left;
background-color: #fff;
}
.gallery-wrapper {
width: 360px;
height: 270px;
margin-bottom: 20px;
overflow: hidden;
position: relative;
}
.gallery-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55px;
background: rgb(0, 0, 0);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
/IE8/
// -ms-filter: ~"alpha(opacity=10 finishopacity=40 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#000000',endcolorstr='#000000',gradientType=0)";
// filter: ~"alpha(opacity=10 finishopacity=40 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#000000',endcolorstr='#000000',gradientType=0)";
}
.phoho-label {
font-size: 18px;
color: #333;
}
.phoho-total {
color: #fff;
font-size: 48px;
position: absolute;
bottom: 66px;
right: 30px;
}
}

@sunny628
Copy link
Author

i try remove easy-less then reinstall and reload and reopen ,all not work

@mrcrowl
Copy link
Owner

mrcrowl commented May 11, 2017 via email

@sunny628
Copy link
Author

small less , it work
maybe my code not support ?

@sunny628
Copy link
Author

it is myCode cause
thanks!
i will check myCode

@mrcrowl
Copy link
Owner

mrcrowl commented May 11, 2017

Okay, I'll close the issue for now. Please open again if you need to.

@mrcrowl mrcrowl closed this as completed May 11, 2017
@mrcrowl
Copy link
Owner

mrcrowl commented May 11, 2017

Also, you might like to try https://stylelint.io/demo/ if you need help with finding .less file problems.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mrcrowl @sunny628